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Avant-propos 

Destinee aussi bien aux debutants qu'aux utilisateurs inities, la 
collection Guide Complet repose sur une methode essentiellement 
pratique. Les explications, donnees dans un langage clair et precis, 
s'appuient sur de courts exemples. En fin de chaque chapitre, decouvrez, 
en fonction du sujet, des exercices, une check-list ou une serie de FAQ 
pour repondre a vos questions. 

Vous trouverez dans cette collection les principaux themes de l'univers 
informatique : materiel, bureautique, programmation, nouvelles 
technologies... 

Conventions typographiques 

Ann de faciliter la comprehension des techniques decrites, nous avons 
adopte les conventions typographiques suivantes : 

gras : menu, commande, boite de dialogue, bouton, onglet. 

italique : zone de texte, liste deroulante, case a cocher, bouton 
radio. 

Police baton : Instruction, listing, adresse internet, texte a 
saisir. 

£< : indique un retour a la ligne volontaire du aux contraintes de 
la mise en page. 



REMAROUE 
I 



II s'agit d'informations supplementaires relatives au sujet traite. 



ATTENTION 

l_ 



Met l'accent sur un point important, souvent d'ordre technique qu'il 
ne faut negliger a aucun prix. 



ASTUK 



Propose conseils et trues pratiques. 



Donne en quelques lignes la definition d'un terme technique ou d'une 



DEFINITION , , ■ .. 

abrevmtion. 
I 
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Chapitre 1 



Introduction a HTML 



La lecture de cette introduction pourrait ne pas paraitre a certains 
comme totalement indispensable a la comprehension du reste de 
l'ouvrage. Pourtant, connaitre la genese et revolution de HTML et des 
langages apparentes peut vous simplifier grandement la vie, en vous 
permettant de mieux comprendre les preoccupations et buts sous-jacents 
des createurs et developpeurs du langage. Pour la creation d'un site Web 
comme pour n'importe quelle activite de developpement, connaitre 
l'historique et la philosophic du langage employe procure un avantage 
souvent determinant pour une reussite parfaite. 



1.1. Bref historique de HTML 

Le langage HTML (HyperText Markup Language) a ete developpe 
initialement par Tim Berners-Lee, alors au CERN. II a rapidement 
connu un vif succes grace au navigateur Mosaic, developpe au NCSA. 
Pendant les annees 1990, il a poursuivi sa croissance en profitant de 
celle, explosive, du Web, et s'est enrichi de nombreuses manieres. Le 
Web repose sur le respect, par les concepteurs de pages et les editeurs de 
logiciels, de conventions identiques pour HTML, ce qui a motive le 
travail commun sur les specifications de HTML. 

C'est un format non proprietaire fonde sur SGML (Standard Generalized 
Markup Language) se conformant au standard international ISO 8879. II 
peut etre cree et traite par de nombreux outils, depuis des editeurs de 
texte simples jusqu'a des outils dedies sophistiques WYSIWYG (What 
You See Is What You Get ou tel ecran, tel ecrit). HTML emploie des 
balises (comme <H1> et </Hl>) pour structurer un texte en en-tetes, 
paragraphes, listes, liens hypertextes, etc. 

La specification HTML 2.0 (RFC 1866 de novembre 1995) a vu le jour 
sous le controle de 1TETF (Internet Engineering Task Force). Le groupe de 
travail HTML du W3C (World Wide Web Consortium) diffuse en Janvier 
1997 la specification HTML 3.2, qui apporte plusieurs ameliorations et 
modifications. 



1 ^^ 



Etats d avancement d un document W3C 

RBUMHE „ , „ T „„ , • , 

Tout document W3C passe par plusieurs etats d avancement (ou de 
maturite) portant un nom precis. 

Brouillon (WD, Working Draft) : un document publie par le W3C afin qu'il 
soit examine par la communaute composee des membres du W3C, du 
public et des autres organismes techniques. 
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Candidat a la recommandation (CR, Candidate Recommendation) : le 

REMaROUE i-w**~i -iv 11 ^ri .- 

W3C considere que le document a ete largement commente et 
repond aux exigences techniques du groupe de travail (Working Group). II 
publie un CR pour obtenir des commentaires sur les mises en ceuvre. 

Proposition de recommandation (PR, Proposed Recommendation) : c'est 
desormais un document technique mature, dont la possibility de mise en 
ceuvre a ete largement verifiee. II est envoye au Comite Consultatif 
(Advisory Committee) pour adoption finale. 

Recommandation (REC, Recommendation) : une Recommandation W3C 
est une specification ou un ensemble de regies ayant recu 1' approbation du 
W3C. W3C en recommande un large deploiement. Elle est analogue a un 
standard tel que diffuse par d'autres organismes. 



Viendra ensuite la specification HTML 4, un progres immense par 
rapport aux versions anterieures. Ses principales innovations concernent 
1'internationalisation, l'accessibilite, les tableaux, les documents 
composes, les feuilles de style, les scripts et l'impression. 

Internationalisation : les documents peuvent etre ecrits en toutes 
les langues et diffuses partout dans le monde. Cela a ete accompli 
en tenant compte du document RFC 2070, qui traite de 
1'internationalisation de HTML. L'adoption de la norme 
ISO/IEC: 10646 comme jeu de caracteres du document pour 
HTML a represente une etape importante. C'est la norme 
mondiale la plus complete, qui tient compte des problemes 
concernant la representation des caracteres internationaux, le sens 
des ecritures, la ponctuation et autres particularites des langues 
mondiales. Cela permet une indexation des documents par les 
moteurs de recherche, une typographie de qualite, la synthese de 
la parole a partir du texte, la cesure, etc. 

Accessibility : au fur et a mesure de la croissance de la 
communaute du Web et de la diversification des capacites et 
aptitudes de ses membres, il devient crucial que les technologies 
employees soient appropriees a leurs besoins specifiques. Le 
langage HTML a ete concu pour rendre les pages Web plus 
accessibles a ceux qui presentent des deficiences physiques. Les 
developpements de HTML 4 qui ont ete inspires par le souci de 
l'accessibilite comprennent : 

— une meilleure distinction de la structure et de la presentation 
du document, en encourageant pour cela l'utilisation des 
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feuilles de style au lieu des elements et attributs de 
presentation HTML ; 

— 1' amelioration des formulaires, ce qui comprend l'ajout de 
touches d'acces rapide (access keys), la possibilite de 
regrouper semantiquement les controles des formulaires et les 
options de l'element SELECT ainsi que l'ajout des etiquettes 
actives (active labels) ; 

— la possibilite de baliser la description textuelle d'un objet 
incorpore (avec l'element OBJECT) ; 

— un nouveau mecanisme d' images cliquables cote client 
(l'element MAP), qui permet aux auteurs d'integrer des liens 
sous forme de texte et d'images ; 

— l'accompagnement obligatoire des images incluses avec 
l'element IMG et des images cliquables incluses avec l'element 
AREA, d'un texte de remplacement, ainsi que des descriptions 
longues des tableaux, images, cadres, etc. ; 

— la gestion des attributs title et lang pour tous les elements, 
ainsi que des elements ABBR et ACRONYM ; 

— un eventail elargi des medias cibles (tty, braille, etc.) a utiliser 
avec les feuilles de style ; 

— 1' amelioration des tableaux, en y incluant des legendes, des 
regroupements de colonnes et des mecanismes pour faciliter la 
restitution non visuelle ; 

Tableaux : le nouveau modele de tableau est fonde sur le 
document RFC 1942. Les auteurs disposent maintenant d'un plus 
grand controle sur leur structure et leur disposition (par exemple, 
les regroupements de colonnes). lis peuvent specifier la largeur 
des colonnes et permettre aux agents utilisateurs d'afficher les 
donnees de table progressivement, au fur et a mesure du 
chargement, plutot que d'attendre le chargement entier du tableau. 

Documents composes : le langage HTML offre maintenant une 
structure standard pour 1' incorporation d'objets media et 
d' applications generiques dans les documents HTML. L'element 
OBJECT (de meme que ses ancetres, les elements plus specifiques 
IMG et applet) fournit le moyen d'inclure des images, des 
sequences video, de 1' audio, des mathematiques, des applications 
specialisees et d'autres objets dans un document. II permet aussi 
aux auteurs de specifier une hierarchie de restitutions de 
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remplacement aux agents utilisateurs qui ne gerent pas certaines 
restitutions particulieres. 

Feuilles de style : les feuilles de style simplifient le balisage 
HTML et soulagent grandement HTML des responsabilites de la 
presentation. Elles donnent aux auteurs comme aux utilisateurs le 
controle de la presentation des documents (informations sur les 
polices de caracteres, alignement, couleurs, etc.). Les 
informations de styles peuvent etre specifiees pour un element 
ponctuel ou pour des groupes d'elements. Elles peuvent se trouver 
a l'interieur du document HTML ou dans une feuille de style 
externe. Les mecanismes qui associent une feuille de style a un 
document sont independants du langage de feuille de style. Avant 
l'apparition des feuilles de style, les auteurs disposaient d'un 
controle limite sur la restitution des pages. HTML 3.2 comprenait 
un certain nombre d'attributs et d'elements permettant un controle 
de 1' alignement, de la taille de la police de caracteres et de la 
couleur du texte. Les auteurs abusaient egalement de tables et 
d'images pour la mise en pages. Le temps relativement long 
necessaire pour que les utilisateurs mettent a jour leurs 
navigateurs implique que ces usages vont perdurer encore pendant 
un certain temps. Cependant, puisque les feuilles de style offrent 
des moyens de presentation plus puissants, le W3C fera 
graduellement disparaitre nombre d'elements et d'attributs de 
presentation HTML. Les elements et attributs concernes sont 
marques comme « deconseilles ». 

Scripts : les scripts permettent aux auteurs de concevoir des pages 
Web dynamiques (par exemple, des « formulaires intelligents » 
qui reagissent au cours de leur remplissage par l'utilisateur) et 
d'employer HTML comme support d' applications en reseau. Les 
mecanismes fournis pour associer HTML et scripts sont 
independants du langage de script. 

Impression : les auteurs voudront parfois aider l'utilisateur dans 
l'impression d'autres documents, en sus du document courant. 
Lorsque des documents font partie d'un ensemble, on peut decrire 
leurs relations en utilisant 1' element HTML LINK ou encore en 
utilisant le cadre de description des ressources (RDF) du W3C. 

Fondamentalement, HTML 4 separe bien plus efficacement la structure 
de la presentation. Les elements et attributs de presentation HTML sont 
de plus en plus remplaces par d'autres mecanismes, en particulier les 
feuilles de style. Plus particulierement, les anciens elements FONT et 
BASEFONT sont desormais deconseilles. 
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La specification HTML 4.01 est enfin une revision de HTML 4 qui 
corrige des erreurs et apporte certaines modifications a la version 
precedente. Vous pourrez trouver le texte en francais de la specification 
HTML 4.01 a l'adresse www.la-grange.net/w3c/html4.01/cover.html Cette 
specification incorpore davantage d'emprunts au langage XHTML 
(extensible HyperText Markup Language), ce qui a permis d'alleger 
d'autant la specification XHTML 1.0. 

HTML 4.01 existe en trois « parfums ». Vous specifiez la variante a 
employer en inserant une ligne au debut du document. Chaque variante 
dispose de sa propre definition de type de document, ou DTD (Document 
Type Definition), qui specifie les regies d'emploi de HTML de facon 
claire et succincte : 

Le DTD HTML 4.01 strict comprend tous les elements et 
attributs qui ne sont pas deconseilles ou qui n'apparaissent pas 
dans les documents avec jeu d'encadrement. Pour les documents 
qui utilisent ce DTD, prendre la declaration de type de document 
suivante : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

Le DTD HTML 4.01 transitoire inclut la totalite du DTD strict 
auquel se raj ou tent les elements et attributs deconseilles (la 
plupart d'entre eux concernant la presentation visuelle). Pour les 
documents qui utilisent ce DTD, prendre la declaration de type de 
document suivante : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www. w3.org/TR/html4/ loose. dtd"> 

Le DTD HTML 4.01 de jeu d'encadrement inclut la totalite du 
DTD transitoire complete des cadres (frames). Pour les documents 
qui utilisent ce DTD, la declaration de type de document suivante 
est employee : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http: //www.w3 . org/TR/html4/ frameset .dtd"> 



J DTD 

IN 

La definition de type de document, ou DTD (Document Type 
Definition), definit la structure d'un document, les elements et attributs 
qui y sont autorises, et le type de contenu ou d'attribut permis. Un 
document bien forme repond simplement aux exigences de la 
specification, tandis qu'un document valide se conforme strictement aux 
regies etablies par la DTD a laquelle il fait reference. 
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L'etude complete des DTD depasse l'objectif de ce livre. Une 
excellente presentation est disponible a l'adresse http://developpeur 
.journaldunet.com/tutoriel/xinl/031219xml_dtdla.shtml 



Dans 1' ensemble de ce livre, nous nous conformerons a la specification 
HTML 4.01. 



1 .2. Pendant ce temps... 

Au cours de cette periode, d'autres groupes de travail s'interessaient a 
differents aspects plus ou moins integres progressivement dans les 
specifications HTML successives. 



XML 

XML (extensible Markup Language) a ete developpe sous l'egide du 
W3C en 1996. II decrit une classe d'objets nommes documents XML et 
decrit partiellement le comportement des programmes informatiques qui 
les traitent. XML est une application restreinte de SGML (Standard 
Generalized Markup Language, ISO 8879). Par construction, les 
documents XML sont des documents conformes SGML. 

lis sont constitues d' unites de stockage nominees « entites », renfermant 
des donnees analysees (parsed) ou non analysees (unparsed). Les 
donnees analysees sont composees de caracteres, dont certains forment 
des donnees « caractere » et d'autres un balisage. Le balisage code une 
description de la structure logique de stockage du document. XML 
procure un mecanisme imposant certaines contraintes sur cette structure 
logique. 

Un module logiciel nomme processeur XML sert a lire les documents 
XML et a procurer Faeces a leur structure et a leur contenu. Par 
definition, un processeur XML accomplit son travail pour le compte 
d'un autre module, 1' application. Cette specification decrit le 
comportement attendu d'un processeur XML : la facon dont il doit lire 
les donnees XML et les informations qu'il doit transmettre a 
F application. 



LE GUIDE COMPLET 17 



Chapitre 1 



Introduction a HTML 



Les objectifs fondamentaux de XML sont les suivants : 

XML doit etre largement utilisable sur Internet. 

XML doit prendre en charge une large gamme d' applications. 

XML doit etre compatible avec SGML. 

L'ecriture de programmes traitant les documents XML doit etre 
facile. 

Les dispositifs facultatifs de XML doivent etre limites voire, dans 
1' ideal, inexistants. 

Les documents XML doivent etre clairs et lisibles par les 
humains. 

La conception XML doit pouvoir etre effectuee rapidement. 

XML doit etre formel et concis. 

II doit etre facile de creer des documents XML. 

Le cote abrupt du balisage XML importe peu. 

Cette specification, accompagnee de ses standards associes (Unicode et 
ISO/IEC 10646 pour les caracteres, Internet RFC 3066 pour les balises 
d'identification de langue, ISO 639 pour les codes de noms de langue et 
ISO 3166 pour les codes de noms de pays), procure toutes les 
informations necessaires pour comprendre XML Version 1.0 et 
construire les programmes informatiques qui le traitent. 



CSS (Cascading Style Sheet) 

Le langage CSS permet de defmir des feuilles de style qui peuvent etre 
appliquees a un site Web. II permet la manipulation des styles appliques 
a chaque balise HTML, via un langage de script. 

La premiere Recommandation CSS (Recommandation W3C du 17 
decembre 1996 revisee le 11 Janvier 1999) a defini tout ce qui touche 
aux caracteristiques graphiques : couleurs, polices, tailles, etc. 

Une seconde Recommandation (CSS2, 12 mai 1998) a ete ajoutee pour 
gerer tous les problemes de positionnement dynamique. Elle defmit les 
feuilles de style en cascade, niveau 2. CSS2 est un langage de feuille de 
style qui permet aux auteurs et aux lecteurs de Her du style (comme les 
polices de caracteres, l'espacement et un signal auditif) aux documents 
structures (comme les documents HTML et applications XML). En 
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separant la presentation du style du contenu des documents, CSS2 
simplifie l'edition pour le Web et la maintenance d'un site. 

CSS2 etant construit sur CSS1, toute feuille de style valide en CSS1 est 
ainsi egalement valide en CSS2, a quelques rares exceptions pres. CSS2 
prevoit des feuilles de style liees a un media speciflque, ce qui autorise 
les auteurs a presenter des documents sur-mesure pour les navigateurs 
visuels, les synthetiseurs de parole, les imprimantes, les lecteurs en 
braille, les appareils portatifs, etc. Cette specification introduit aussi les 
notions de positionnement du contenu, de telechargement des polices, de 
mise en forme des tables, de fonctions d'internationalisation, de 
compteurs et de numerotage automatique et quelques proprietes 
concernant l'interface utilisateur. 

Aujourd'hui, un troisieme projet (CSS3, Brouillon du 23 mai 2001) est 
en cours de realisation. II modularise CSS2. Plusieurs de ces modules 
sont aujourd'hui a l'etat de Candidats a la recommandation. Pour de 
plus amples informations, consultez le site du W3C. 



A propos du DHTML 

Le DHTML (Dynamic HyperText Markup Language) a ete invente par 
Netscape a partir de sa version 4. Ce n'est pas a proprement parler un 
langage de balises pour Internet : il n'existe d'ailleurs aucune norme 
DHTML a part entiere. C'est en realite un ensemble de technologies 
Internet associees afin de fournir des pages HTML plus dynamiques. 
Microsoft a suivi cette voie en developpant une autre version de 
DHTML a partir de la version 4 d'Internet Explorer. 

DHTML s'appuie sur HTML (necessaire pour presenter le document), sur 
les feuilles de style (CSS), qui permettent de definir un style pour 
plusieurs objets et le positionnement de ceux-ci sur la page, sur le Modele 
Objet de Document (DOM), proposant une hierarchie d' objets afin de 
faciliter leur manipulation, et enfin sur un langage de script, essentiel pour 
definir des evenements utilisateur. II s'agit essentiellement de JavaScript 
(developpe par Netscape) ou de JScript (developpe par Microsoft), et 
eventuellement de VBScript, la tendance etant toute fois d' employer 
desormais ECMAScript, une tentative de normalisation du noyau du 
langage : sa syntaxe, ses mots-cles et ses composants natifs. La troisieme 
edition du standard ECMA-262 a ete publiee en decembre 1999 
(www.ecma-international.org/publications/standards/Ecma-262.htm). 

Sans script, le DHTML n'est pas dynamique. C'est l'association avec le 
script qui permet d'apporter des modifications apres le chargement de la 
page, chose impossible avec le HTML classique. Avec ce dernier, une fois 
la page chargee et affichee, il est impossible d'afficher de nouveaux 
elements ou de les deplacer. 
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Le DHTML serait tres interessant a utiliser s'il existait une norme 
orricielle respectee par les navigateurs, ce qui reste loin d etre le 
cas : un script ecrit pour un navigateur risque fort de ne pas fonctionner 
sur un autre sans travail d' adaptation. Meme si chacun peut 
potentiellement profiter du DHTML, puisque pratiquement plus aucun 
internaute n' utilise de navigateur de generation inferieure a la version 4, 
les nombreuses incompatibilites entre navigateurs provoquent de grandes 
difficultes. 

DHTML n'est done en rien comparable au PHP, a l'ASP, aux CGI, qui 
permettent de formater « a la volee » les pages d'un site (souvent interface 
avec des bases de donnees) en proposant du contenu en temps reel et en 
interagissant avec l'utilisateur. La majorite des effets du DHTML restent 
ainsi reserves aux intranets, ou la population des navigateurs est connue et 
maitrisee. 



DOM2 (Document Object Model level 2) 

Le Modele Objet de Document (DOM, Recommandation W3C du 13 
novembre 2000) est une interface de programmation d' application (API) 
pour des documents HTML valides et XML bien formes. II definit la 
structure logique d'un document et la maniere d'y acceder et de le 
manipuler. Dans la specification DOM, le terme « document » est 
employe au sens large : XML sert de plus en plus a representer de 
nombreuses sortes d' informations, qui peuvent etre stockees sur des 
systemes varies, et etaient traditionnellement considerees comme des 
donnees plutot que comme des documents. XML presente neanmoins 
ces donnees comme des documents, le DOM permettant de gerer ces 
donnees. 

Avec le Modele Objet de Document, les programmeurs peuvent 
construire des documents, naviguer dans leur structure ainsi qu'ajouter, 
modifier ou effacer des elements et leur contenu. Tout ce qui se trouve 
dans un document HTML, ou XML, peut etre touche, modifie, efface ou 
ajoute en utilisant le Modele Objet de Document, a quelques rares 
exceptions pres. 

Un objectif important du DOM en tant que specification W3C est de 
fournir une interface de programmation standard pouvant etre utilisee 
dans une grande diversite d'environnements et d' applications. Le DOM 
est concu pour une utilisation dans n'importe quel langage de 
programmation. 
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1.3. La nouvelle generation : XHTML 

XHTML (extensible HyperText Markup Language) constitue une famille 
de modules et de types de documents existants ou futurs, qui constituent 
une reproduction, un sous-ensemble et une extension de HTML 
reformule en XML. Les types de documents de la famille XHTML sont 
tous fondes sur XML dans le but de fonctionner avec des agents 
utilisateurs fondes eux aussi sur XML. C'est le successeur de HTML, 
disposant desormais de sa propre specification, XHTML 1.0. Celle-ci est 
la premiere Recommandation W3C pour XHTML, creee d'apres les 
travaux anterieurs sur HTML 4.01, HTML 4.0, HTML 3.2 et HTML 2.0. 
Elle combine la force de HTML 4 avec la puissance de XML. 

XHTML 1.0 emprunte les elements et attributs de la Recommandation 
W3C HTML 4, ce qui permet son interpretation par les navigateurs 
existants tant que certaines regies tres simples sont respectees (voir 
Annexe C). Vous pouvez done employer des a present XHTML. 

Vous pouvez transformer vos anciens documents HTML en XHTML 
grace a un convertisseur d'Open Source, HTML Tidy. Cet outil elimine 
au passage certaines erreurs de balisage, reduit l'eparpillement et 
ameliore globalement le balisage, facilitant d'autant sa maintenance 
ulterieure. 

Comme HTML 4.01, XHTML 1.0 existe en trois « parfums » : Strict, 
Transitional et Frameset. Vous choisissez la variante en inserant une ligne 
au debut du document, specifiant le DTD employe. 

La specification XHTML 1.0 complete en anglais est disponible en 
plusieurs formats, dont HTML, PostScript et PDF. II existe egalement de 
nombreuses traductions, dont une version francaise disponible a 
l'adresse www.la-grange.net/w3c/xhtmll/ 

Nous signalerons lorsque necessaire les modifications a apporter au code 
HTML 4.01 pour une parfaite compatibilite avec la specification 
XHTML 1.0. 
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1 .4. Presentation rapide de la syntaxe 
et de la structure du langage 

HTML est fondamentalement un langage tres simple, dans lequel des 
balises (tag) definissent un element et ses proprietes. En HTML, ces 
balises sont les signes inferieur et superieur (comme dans <TITLE>). 
Une balise definit un element : un objet, texte ou autre, encadre par une 
balise d'ouverture et une balise de fermeture. Cette derniere est 
identique a la balise d'ouverture, a ceci pres qu'une barre oblique (slash) 
est placee entre 1 e caractere inferieur et le nom de l'element. Entre les 
deux balises est place le contenu : 

<TITLE>Titre</TITLE> 

Ici, l'element est TITLE, la balise d'ouverture <TITLE>, le contenu 
Titre et la balise de fermeture </TlTLE>. 

Certains elements peuvent exceptionnellement etre presents dans un 
document sans balise : <HEAD> et HEAD sont tous les deux valides. 

Les elements depourvus de contenu portent le nom d'e/emenfs vides. Si 
cette absence de contenu est liee a la definition de l'element, celui-ci est 
egalement depourvu de balise de fermeture : un tel element accomplit 
quelque chose, puis s'arrete, devenant superflu dans le code. Un saut de 
ligne (BR) est un tel element vide : une fois le saut de ligne effectue, il 
n'y a plus rien a faire. Vous rencontrerez par la suite d'autres elements 
vides. 



XHTML 

REMAMUE „ TTrT11> „ T . ,., . .. . „ 

XHTML impose que tout element possede une balise de fermeture. II 
existe toutefois une notation particuliere signalant en XTML un element 
vide : 

<br /> 

Oil 

<img src="image . jpg" alt="image" /> 

Cette construction est a preferer a <brx/br>, autorisee par XML, mais 
qui provoque des resultats inattendus avec certains agents utilisateurs. 
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Un element n'est pas une balise ! 

Certaines personnes font reference aux elements comme a des balises 
(par exemple, « la balise P »). Souvenez-vous que l'element p est une 
chose et que la balise <p> en est une autre. Par exemple, l'element head 
est toujours present, meme si les balises ouvrante <head> et fermante 
</HEAD> peuvent etre absentes du document. 



Les elements se repartissent en deux categories principales : les blocs et 
les lignes, qui equivalent reciproquement aux styles paragraphe et 
caractere d'un traitement de texte. Un element de type bloc cree un 
nouveau bloc (texte ou graphique), generant le plus souvent un saut de 
ligne ou de paragraphe lors de son ouverture et/ou de sa fermeture. Le 
plus classique des elements de type bloc est le paragraphe de texte, mais 
il en existe bien d'autres, comme vous le verrez. 

En revanche, un element ligne ne provoque pas de saut de ligne ou de 
paragraphe et n'affecte pas la totalite du bloc. C'est le cas des elements 
modifiant la police, les couleurs, etc. Quelques tres rares elements 
peuvent etre a la fois de type bloc et de type ligne. 

Tout element peut posseder des elements enfants imbriques. II porte 
alors le nom d' element parent : 

<Hl>Ceci est le titre <B>important</B></Hl> 

Ici, un element B (gras) est imbrique dans l'element parent HI (en-tete 
de niveau 1). Le contenu de l'element HI est Ceci est le titre 

<B>important</B>, celui de l'element B est important. 

Les elements peuvent posseder des proprietes associees, appelees 
attributs, qui peuvent eux-memes posseder des valeurs (par defaut, ou 
encore definies par l'auteur ou par un script). Les couples attribut/valeur 
apparaissent avant le caractere > final de la balise ouvrante d'un 
element. Un nombre quelconque de couples attribut/valeur (autorises), 
separes par des espaces, peuvent apparaitre dans la balise ouvrante d'un 
element. lis peuvent survenir dans n'importe quel ordre : 

<IMG src="image . gif "> 

Les attributs sont obligatoires pour certains elements. 
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Sensibilite a la casse 

Les elements HTML et leurs attributs ne sont pas sensibles a la casse. 
Si theoriquement vous n'avez done pas a vous preoccuper de la bonne 
utilisation de majuscules et de minuscules dans vos balises, sauf pour les 
noms de fichiers, d'apres la specification, les noms de balise doivent 
toujours etre ecrits en majuscules et les attributs en minuscules. 



En general, mieux vaut toujours placer la valeur d'un attribut entre 
guillemets, meme si HTML tolere leur absence lorsqu'il s'agit d'une 
valeur numerique (contrairement a XTML). Cette valeur placee entre 
guillemets doit etre considered comme sensible a la casse. Cette 
sensibilite a la casse des valeurs d' attributs peut provenir du navigateur 
(exceptionnellement) ou du serveur (tres frequemment). Ainsi, une telle 
faute de casse peut passer inapercue localement, mais etre flagrante une 
fois le site publie. 



1 ^si^ 1 



REMiRBUE 



XHTML 

En revanche, XHTML est sensible a la casse : la specification 
recommande d'ecrire tous les noms d'elements et d'attributs en 
minuscules. Pour XML, <li> et <li> sont des balises differentes. Un 
soin particulier doit en outre etre apporte au respect de la casse des 
valeurs des attributs. 



Le Tableau 1.1 montre la structure d'un element, illustree de quelques 
exemples. Une balise HTML comporte toujours les signes <>. 



Tableau 1. 1 : Structure d'un element HTML 


Composant 


Description 


Exemple 


< 


Balise ouvrante de la balise 
d'ouverture 


< 


ELEMENT 


Nom de I'element 


A 


Attribut 


Propriete de cet element. Parfois 
obligatoire pour certains elements. 


href 


Valeur 


Valeur de I'attribut, precedee d'un 
signe egal et normalement placee 
entre guillemets. 


="http://www. 

microapplication. fr" 


> 


Balise fermante de la balise 
d'ouverture 


> 
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Tableau 1. 1 : Structure d'un element HTML 


Composant 


Description Exemple 


Contenu 


Contenu de I'element [pas pour tous MicroApplication 
les elements). 


</ELEMENT> 


Balise de fermeture (parfois </A> 
facultative]. 



Toute page HTML est composee, apres la ligne de declaration du DTD, 
d'un element racine HTML qui comprend deux elements enfants : 

L'en-tete (HEAD) comprend des donnees non-affichees par le 
navigateur, servant a sa configuration ou presentes au benefice de 
l'auteur, du lecteur ou d'autres intervenants. 

Le corps (BODY) contient les donnees qui seront affichees, 
encadrees par des balises specifiant leur structure. 

Une page HTML se presente done fondamentalement comme suit : 

<!DOCTYPE . . .> 

<HTML> 

<HEAD> 

. . . contenu . . . 

</HEAD> 

<BODY> 

contenu . . . 
</BODY> 
</HTML> 

Nous reviendrons bien stir plus en detail par la suite sur cette structure. 



1.5. Resume 

HTML est un langage concu par le CERN au debut des annees 
1990. Fonde sur SGML (Standard Generalized Markup Language), II 
a connu plusieurs evolutions avant de parvenir a la specification 
actuelle HTML 4.01 . 

HTML separe desormais efficacement la structure de la 
presentation. Les elements et attributs de presentation HTML sont 
de plus en plus remplaces par d'autres mecanismes, en particulier 
les feuilles de style. 

XML (extensible Markup Language), CSS (Cascading Style Sheet) 
et DOM (Document Object Model) sont autant de technologies 
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apparentees desormais integrees ou exploiters en tout ou partie a 
et par HTML. 

XHTML represente la future generation de HTML. La 
specification actuelle est XHTML 1 .0. 

HTML est un langage dans lequel des balises (tag) defmissent un 
element et ses proprietes. En HTML, ces balises sont les signes 
inferieur et superieur (<>). Une balise definit un element encadre 
par une balise d'ouverture et une balise de fermeture. Le contenu 
figure entre ces deux balises. 

II existe deux categories principales d'elements : les blocs et les 
lignes. Un element de type bloc cree un nouveau bloc, generant le 
plus souvent un saut de ligne ou de paragraphe lors de son 
ouverture et/ou de sa fermeture. En revanche, un element ligne ne 
provoque pas de saut de ligne ou de paragraphe et n'affecte pas la 
totalite du bloc de texte. 

Les elements peuvent posseder des proprietes associees, ou 
attributs, dotees de valeurs. Les couples attribut/valeur 
apparaissent avant le caractere > final de la balise ouvrante d'un 
element. Les attributs sont obligatoires pour certains elements. 
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Pour bien concevoir un site Web, vous devez connaitre et maitriser deux 
types d' outils : un ou plusieurs editeurs HTML, qui permettent de creer 
effectivement les pages et done le site Web, et un ou plusieurs 
navigateurs, qui affichent reellement ces pages Web. 

Vous pourriez penser : « d' accord, parler des logiciels de creation de 
sites est logique, mais pourquoi aborder les navigateurs ? » La reponse 
est simple : malgre l'existence des Recommandations du W3C, la 
« petite guerre » entre les grandes families de navigateurs ainsi que leur 
obstination a preconiser plutot telle ou telle methodologie (et surtout pas 
celle utilisee par 1' autre) fait que le rendu d'une meme page HTML peut 
grandement differer selon le navigateur employe. 



2.1 . Outils de creation de pages Web 

Un editeur HTML a pour but d'eviter la saisie manuelle sou vent 
fastidieuse des caracteres speciaux, des codes couleur, de l'encodage des 
balises, etc. Comme il en existe un grand nombre, quelques precisions 
sur les outils disponibles peuvent etre utiles. Remarquez toutefois que 
toute appreciation en ce domaine releve du subjectif : nous n'en 
presentons que quelques-uns, classes par ordre alphabetique. La plupart 
des editeurs etant disponibles sur le Net en version devaluation, il peut 
etre utile d'en tester plusieurs avant de proceder a un choix definitif. 

Les differents outils peuvent etre classes en deux categories : les editeurs 
commerciaux et les produits Open Source (gratuits). lis se repartissent 
egalement entre editeurs WYSIWYG (What You See Is What You Get) et 
les editeurs en texte brut, qui necessitent de connaitre le HTML. Ces 
derniers disposent generalement d'une fonction de previsualisation dans 
laquelle le codage des balises HTML n'apparait plus. Gardez cependant 
toujours a l'esprit que cette previsualisation n'est, et ne sera, jamais 
fidele a 100 % par rapport a ce qui sera affiche par un navigateur. 

A notre avis, mieux vaut eviter les editeurs « qui ecrivent tout pour 
vous ». Un editeur doit vous faciliter le travail tout en vous laissant la 
main dans l'elaboration de votre page. Adoptez l'editeur avec lequel 
vous vous sentez le plus a l'aise. Meme s'il n'est pas le plus celebre, il 
sera votre compagnon de longues heures de travail. D'ailleurs, pourquoi 
se limiter a un seul editeur ? II est tout a fait envisageable d'employer un 
editeur evolue pour les premiers jets, arm de disposer rapidement d'un 
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brouillon exploitable, puis de recourir a un editeur de la premiere 
generation (plus proche des balises brutes) pour une personnalisation 
plus pointue. 



Editeurs commerciaux 
Adobe Golive CS2 (Windows, Macintosh) 

Adobe Golive est avant tout destine aux infographistes. II beneflcie du 
savoir-faire d'Adobe en matiere d'images et d'illustrations et permet la 
gestion de la mise en page au pixel pres, la gestion de l'interactivite 
grace a une ligne du temps et a un editeur JavaScript, la creation des 
feuilles de style WYSIWYG et la gestion votre site. Les autres 
concepteurs se sentent un peu perdus dans cet univers de palettes et 
autres outils. Le code genere est d'une complexite certaine, a faire palir 
tout puriste du codage HTML, tandis que son prix reste eleve (479 €). 

Dreamweaver MX 2004 (Windows, Mac) 

Macromedia Dreamweaver est considere par beaucoup comme le 
meilleur editeur HTML du moment. II permet de concevoir 
intelligemment la creation de sites (codage HTML propre et 
academique, compatibilite avec les differents navigateurs, mises a jour 
dans tout le site, etc.). Certainement un peu deroutant lors de la premiere 
prise en main, en raison de son nombre impressionnant de palettes 
d'outils, il est facile de s'y habituer : cet editeur WYSIWYG convient 
aussi bien aux debutants qu'aux inities. Complet, performant, 
professionnel et evolutif, son seul handicap est son prix eleve (530 €, 
mais seulement 260 € en version Education). 



FrontPage (Windows) 

Les utilisateurs de Microsoft Office, et plus specialement de Word, ne 
seront pas depayses par l'interface de l'editeur de Microsoft : sa prise en 
main leur est ainsi aisee. C'est un bon produit, auquel on ne peut 
reprocher qu'une facon peu academique d'ecrire le HTML : il est 
frequent que des navigateurs autres qu 'Internet Explorer eprouvent 
quelques difficultes a interpreter des pages ecrites avec cet editeur 
(240 €). 
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HotDog Professional 7.0.1 (Windows) 

La nouvelle version de la suite HotDog Professional Webmaster, de la 
societe Sausage Software, prend en charge un nombre encore plus grand 
de langages (HMTL, JavaScript, CSS, PHP, ASP, VBScript). 
Particulierement puissante, elle dispose d'a peu pres toutes les fonctions 
envisageables. L'interface s'ouvre sur une fenetre mixte qui presente a 
la fois le code et sa mise en page obtenue via le navigateur. De tres 
nombreux outils et fonctions sont disponibles. Les outils Supertoolz 
peuvent etre telecharges en groupe ou separement depuis le site Internet 
de Sausage Software. L'utilisation de la couleur en fonction des balises 
ou de la syntaxe, la gestion de sites, la prise en charge des codes de 
classement PICS (filtrage des contenus indesirables) et des canaux Web 
d'envoi de donnees a l'instigation du serveur sont quelques-unes des 
possibilites offertes. HotDog affiche automatiquement en rouge toute 
erreur de syntaxe HTML qu'il detecte. Cette version integre Xara 
MenuMaker (pour la creation de menus animes en DHTML ) ainsi que 
Bloomer (facilite la creation d' animations flash) (100 $). 

IMamo WebEditor 

Intermediaire entre FrontPage Express et FrontPage 2000, cet editeur 
devrait ravir les webmestres debutants a intermediaries refusant de 
recourir a des « usines a gaz » plus performantes, mais aussi plus 
complexes. Raisonnablement complet et intelligemment concu, le prix 
de Namo WebEditor reste raisonnable (99 $). 

WebExpert 6.0 (Windows) 

WebExpert est un des rares editeurs de ce groupe a ne pas etre 
WYSIWYG, mais a proposer un volet de visualisation permettant de 
verifier instantanement le resultat de son codage. Interessant pour ceux 
qui preferent avoir la sensation de coder du HTML plutot que celle 
d'employer un traitement de texte. C'est un editeur complet, intelligent, 
respectueux du code et de l' esprit HTML. Disposant de scripts et 
d' aides integres, il permet de travailler rapidement et efficacement sur 
(X)HTML, CSS, JavaScript, ASP et PHP. II possede un autre interet : 
son faible prix (67 €). Vous pouvez facilement en trouver une version 
d'evaluation de 30 jours en telechargement. 
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Web Fast (Windows) 

Web Fast est plus un outil complet de gestion de site qu'un simple 
editeur Web. Des son lancement du logiciel, il prend en charge les 
etapes necessaires a la construction du site. Web Fast integre le site 
lui-meme, le logiciel FTP necessaire a sa publication sur Internet, les 
fonctions de commerce electronique (versions Plus et Pro) avec suivi de 
commandes, le paiement securise (version Pro), les statistiques 
completes du site et un back-office. Le prix s'echelonne selon la version 
de 75 a 456 €. 

II existe bien d'autres editeurs commerciaux, parmi lesquels HotMetal 
(500$, voir www.xmetal.com/) et CoffeeCup HTML (www.coffeecup.com 
/html-editor/, 49 $). Vous pourrez les decouvrir en lan9ant une recherche 
a l'aide de votre moteur de recherche favori, en employant comme 
mot-cle « html editor » ou « editeur html ». Ici, comme sou vent, Google 
reste votre meilleur ami ! 



Word (Windows) 

Word peut egalement etre considere comme un editeur HTML : il est 
possible d'enregistrer un texte au format HTML, le traitement de texte 
se chargeant d'ajouter toutes les balises necessaires en fonction de ce 
qui a ete saisi. Cela est malheureusement accompagne d'un fatras de 
balises absolument superflues, le respect des specifications W3C restant 
interprete de facon tres personnelle par Microsoft... A deconseiller 
absolument. 



Editeurs g rat u its 

Est-il reellement necessaire de recourir a un logiciel payant ? 
Aucunement. II existe de tres nombreux produits gratuits, capables 
d'effectuer un excellent travail et probablement tres suffisants pour la 
creation d'un site personnel. 

1st Page 2000 (Windows) 

1st Page 2000 est un outil de creation de sites Web aussi adapte a la 
creation des pages HTML qu'a l'elaboration de scripts dans les langages 
de programmation les plus recents. Son interface disponible sous trois 
formes le destine tant aux debutants qu'aux professionnels du secteur. 
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Ce logiciel offre toutes les fonctionnalites courantes de ses concurrents 
payants, jusqu'aux plus sophistiquees comme en temoigne la presence 
d'un convertisseur XML, d'un verincateur de syntaxe, d'un compresseur 
de documents ou encore d'un client FTP integre. II offre par ailleurs des 
possibilites originales comme le redimensionnement automatique des 
images, la correction de l'orthographe en cours de frappe (en anglais) et 
la previsualisation dans quatre navigateurs differents. Outre l'edition en 
JavaScript particulierement bien prise en charge, 1st Page 2000 permet 
de manipuler les fichiers Flash et Shockwave. II sait identifier et 
surligner la syntaxe des langages DHTML, ASP, SSI, CFML et WebTV. 
Le paquetage comprend 450 scripts JavaScript, 15 en DHTML , 17 en 
Perl , 6 en HTML et 2 scripts CGI. Un bon niveau HTML est necessaire. 
II n'est actuellement disponible qu'en anglais et peut etre trouve en 
telechargement un peu partout. Le site officiel se trouve a l'adresse 
www.evrsoft.com/lstpage2.shtml. 

Am ay a (Windows, Unix, AIX, Solaris, Linux) 

Navigateur et editeur WYSIWYG gratuit du W3C. II sert a demontrer et 
a experimenter la plupart des nouveaux formats et protocoles 
developpes par le consortium W3. II est adaptable et extensible, et prend 
en charge notamment MathLM. Amaya propose par defaut de creer un 
nouveau document uniquement dans une des trois versions de la 
specification XHTML 1.0 (strict, transitoire, de jeu d'encadrement), 
mais il est possible de transformer le document en version HTML 4.01 
(ou meme en version XHTML 1.1) a l'aide de 1' option de menu File > 
Change the document type. C'est un produit interessant, ne serait-ce que 
pour verifier la conformite de votre code (www.w3.org/Amaya/). 
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Figure 2. 1 : 

Interface d'Amaya 
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Editeur Mozilla/IXIetscape Composer (Linux, 
Windows et Mac OSX) 

Indus dans la suite Netscape Communicator depuis la version 4.0, 
Netscape Composer etait un editeur gratuit. La derniere version de la 
suite Mozilla (actuellement la 1.7.7) contient toujours cet excellent 
editeur, desormais nomme Mozilla Composer. Telechargez-la en 
francais sur www.mozilla-europe.org/fr/ Vous disposerez, en plus du 
celebre navigateur de 1' editeur, du logiciel gerant la messagerie et les 
forums et de celui de discussion en direct (Chatzilla). 

L' editeur Mozilla propose toutes les grandes fonctions d'un editeur Web, 
dont des modes en code source ou en WYSIWYG, l'integration de 
feuilles de style et un logiciel ftp (file transfer! protocol) pour envoyer vos 
pages sur un serveur distant. Bien concu, cet editeur WYSIWYG reprend 
les principales, et done les plus usuelles, fonctions du HTML. II reste 
cependant un peu « leger » face aux editeurs HTML plus specialises. 
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Figure 2.2 : Editeur Mozilla 



FrontPage Express 

Indus dans la suite Microsoft Internet Explorer 4.0, 5.0 et suivantes, 
FrontPage Express est egalement un editeur gratuit. II reprend les 
fonctions les plus usuelles du HTML. Son interface est voisine de celle 
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de Microsoft Word. Attention cependant, il « ecrit » principalement pour 
Microsoft Explorer, ce qui peut provoquer de mauvaises surprises avec 
d'autres navigateurs. Prudence... 
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Figure 2.3 : FrontPage Express 



NotePad (Windows) 

Eh oui, le bon vieux Bloc-Notes de Windows peut servir d'editeur 
HTML ! Si vous employez Internet Explorer ou que vous en disposez, il 
est meme probable que vous vous en servirez (ou que vous vous en etes 
deja servi) a votre insu : lorsque vous choisissez d'afficher le code 
source d'une page avec ce navigateur (Affichage » Source), celui-ci 
s'affiche dans le Bloc-Notes. Si vous travaillez en local, vous pouvez 
immediatement modifier le code, enregistrer le fichier, puis rafraichir 
votre navigateur (bouton Actualiser ou Affichage » Actualiser) pour 
voir les resultats de vos modifications ; et cela d'une facon souvent plus 
fidele que celle du volet de previsualisation des editeurs plus evolues. 
Oserai-je avouer que, comme c'est le cas pour d'autres anciens 
programmeurs, le Bloc-notes reste mon principal editeur HTML, surtout 
en raison du mecanisme qui vient d'etre explique : j'ai pris l'habitude de 
travailler ainsi un site en local sous IE, meme si mon navigateur Web 
principal est en realite FireFox... 
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Figure 2.4 : 

Affichage du code 
source dans le 
Bloc-Notes, depuis 
Internet Explorer 
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IMvu 1.0/KompoZer (Linux, Windows et Mac 
OSX) 

Nvu (prononcer « N-viou ») est la refonte du module d'edition HTML 
de Mozilla developpe par Disruptive Innovations. II permet de creer 
facilement des pages Web en mode WYSIWYG. S'il n'est pas aussi 
puissant que les poids lourds comme Dreamweaver ou Adobe Golive, il 
reste largement suffisant pour la majorite des utilisations. Nvu permet de 
creer des pages Web et de gerer un site sans aucune connaissance 
technique ou apprentissage du HTML, ce qui le rend accessible a 
quasiment tout le monde. II permet egalement de generer des documents 
en XHTML, d'editer des pages en PHP et contient un editeur de feuilles 
de style integre (CaScadeS) tres pratique. Vous trouverez plus 
d' informations sur Nvu sur le site officiel du projet Nvu (en anglais), 
www.nvu.com. Cerise sur le gateau, il existe une version en francais ! 
Produit recommande. 







Jfll.*] 




Fichier Edition AFf image; Insertion Format Tableau Outils Aide 








Nouveau Oliver Enregislrer Publier Ancre Lien Image Tableau Forrriulaire 


Orthography 


Imp rimer 




I Corps de texte J 1 / 


A-AlB / U]l=:=|Esaa|^« 




(sans classe) _▼] Largeur variable * 


|9fij« ! !l|SS ».«.« ffi 




■■ Gestionnaire de sites 




449pi 




w 




Voir; | Tous les fichiers _^j 

Edition des sites | [$ 3 E? tZ £ 


i 






Norn | E 










1 


Normal | E°l Balises HTML | EH Source | -. Apercu | 








<body> 




U 



Figure S.5 : Interface de Nvu 

Nvu n'est toutefois plus maintenu et French Mozilla recommande le 
passage a Komposer (http://www.kompozer.net/). La version proposee en 
telechargement est anglaise, mais il existe des kits de localisation 
disponibles sur le site officiel ou sur le site de French Mozilla (http: 
//frenchmozilla. sourceforge.net/nvu/). 
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SoThink HTML Editor (Windows) 

SoThink HTML Editor (anciennement nomme CutePage : vous pourrez 
encore le trouver sous ce nom) est un editeur HTML dote de 
nombreuses fonctions, ainsi que d'un composant FTP capable de 
telecharger les fichiers sur un serveur. Des outils supplementaires 
peuvent etre telecharges depuis le site de SourceTec Software. Appeles 
« widgets » (un widget, contraction de Windows et de gadget, designe 
sous Unix et Linux un outil graphique permettant d'accomplir une 
action. Windows emploie plutot le terme de « controle »), ils concernent 
en particulier la creation de boutons, bannieres et menus. SoThink est un 
editeur qui apportera beaucoup aux debutants et auteurs de pages Web 
moyennement experimentes (www.SOthink.com/htmleditor/). 

Comme pour les editeurs commerciaux, il existe bien d'autres editeurs 
gratuits. La encore, vous pourrez en identifier en lancant une recherche a 
l'aide de votre moteur de recherche favori. 

En conclusion, notre avis est qu'un logiciel gratuit est largement 
suffisant pour les besoins d'un utilisateur « normal » et peut suffire pour 
une petite ou moyenne entreprise. Comme nous l'avons deja evoque, le 
choix de ce logiciel depend de vos preferences personnelles. Dans les 
exemples de ce livre, nous nous servirons d'un editeur en texte brut (ici 
le Bloc-Notes de Windows, mais ce peut etre un tout autre produit, par 
exemple Vi sous Linux), ainsi que des editeurs Amaya du W3C et de 
1' excellent Nvu en francais. 



2.2. Navigateurs 



Si vous souhaitez que votre site soit visible par tous dans de bonnes 
conditions, et qu'il ne soit pas reserve aux seuls francophones possedant 
une vue de 10/10, et disposant de surcroit exclusivement d'lnternet 
Explorer version 6 corrige SP2... vous devez prendre en compte les 
navigateurs de votre public. S'il s'agit d'un intranet d'entreprise, la 
chose est generalement facile. Si, en revanche, vous voulez vous ouvrir 
au monde entier, la tache se complique. La premiere etape consiste done 
a examiner les navigateurs actuellement employes et a connaitre les 
principales differences existant entre eux. 
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REMAROUE _ ~ . _ T _ T . ... , . 

Dans les premiers temps, Netscape Navigator etait le seul produit 
existant. Le terme anglais Web browser a done logiquement ete traduit 
« navigateur Web ». Suite a 1'arrivee d'Internet Explorer, Microsoft a 
insidieusement tente de faire passer dans les mceurs le terme 
« explorateur Web ». Certains technocrates francais ont alors tente une 
solution intermediaire, en proposant comme terme officiel « fureteur », 
tandis que les Canadiens preferaient « butineur ». Nous nous en 
tiendrons dans ce livre au terme consacre par l'histoire, soit 
« navigateur », malgre une tendresse personnelle pour butineur. 



Bref historique : Netscape contre Microsoft 

Comme nous l'avons deja evoque, le Web est ne vers 1990 des travaux 
de Tim Berners-Lee. Le premier navigateur digne de ce nom, Mosaic, 
est cree en 1992 par le NCSA (National Center for Supercomputing 
Applications), un departement de l'universite de l'lllinois. Le projet etait 
dirige par Marc Andreessen. Ses etudes a peine terminees, ce dernier se 
rend dans la Silicon Valley, ou il participe a la creation de l'entreprise 
Mosaic Communications. Le nom Mosaic etant la propriete du NCSA, 
l'entreprise est rebaptisee Netscape. 

Au milieu de l'annee 1995, le navigateur de Netscape regne en maitre : 
il etait alors depourvu de tout concurrent serieux. Sa part de marche n'a 
pas ete mesuree avec precision a cette epoque, mais tout le monde 
s'accorde a dire qu'elle depassait 80 %. Ay ant pris conscience de 
1' importance du Web, Microsoft concoit alors son propre navigateur, 
Internet Explorer, dont la premiere version est distribute gratuitement 
avec Windows 95. 

Des 1996, la part de marche du navigateur de Netscape ne cesse de 
decroitre, au rythme de 1 % par mois environ. Meme si, comme l'a 
constate la justice americaine, Microsoft a abuse de sa situation de 
monopole dans le domaine du systeme d' exploitation pour imposer son 
navigateur aux constructeurs de micro-ordinateurs, force est toutefois de 
reconnaitre qu'a partir de la version 4, Internet Explorer l'emporte sur le 
plan technique : cette avance ne s'est ensuite jamais dementie. 

En 1998, le code du navigateur Netscape est rendu public. Les logiciels 
libres et Netscape ont en effet un ennemi commun : Microsoft. En 
donnant a des benevoles la possibilite de participer a revolution de son 
navigateur, Netscape pense probablement pouvoir accelerer et ameliorer 
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sa production. C'est tout le contraire qui se passe. La version 5 du 
navigateur ne verra jamais le jour, et la version 6 fut, a ses debuts, tres 
decevante (oserai-je dire que les termes « usine a gaz » et « lenteur 
extreme » sont ici des euphemismes ?) et surtout tres tardive. Des 1999, 
les parts de marche de Netscape et Microsoft sont respectivement de 29 
et 69 % (source : Statmarket). 

Un des gros defauts du navigateur de Netscape concernait l'affichage 
des tableaux. Lorsque ceux-ci commencent a etre employes 
massivement pour la conception des pages Web, ce defaut eclate au 
grand jour. La version 6 est corrigee, malheureusement un peu tard : au 
debut de l'annee 2000, la part mondiale de marche du navigateur de 
Netscape n'est plus que de 18 %. Au milieu de l'annee 2001, il etait 
generalement admis qu'elle etait descendue autour de 12 %, mais 
qu'elle etait stabilisee. L' apparition de la version 6 du navigateur de 
Microsoft (fin octobre 2001) provoque une nouvelle baisse de la part de 
marche de son concurrent : elle descend en dessous de 10 % et continue 
a decroitre, tandis que la version 6 d'Internet Explorer connait en 
revanche un reel succes. La chute s'accelere alors de maniere 
exponentielle. Une etude sur l'annee 2001 creditait Navigator de 4,5 % 
de parts de marche, contre 94,2 % a Explorer. 

La version 6.2 de Navigator, corrigee, apparait enfin comme un produit 
serieux, capable de rivaliser avec la version 6 de son concurrent, sauf en 
ce qui concerne la vitesse, pourtant amelioree. Netscape a mise sur la 
difference : son produit respecte les standards du W3C. Netscape a 
abandonne les technologies proprietaries (JavaScript) au profit de 
technologies standardises (ECMAScript), alors que Microsoft reste 
completement en marge des Recommandations W3C. Le rachat de 
Netscape par AOL place toutefois le sort de Navigator entre les mains de 
ces derniers : ce fournisseur d'acces a Internet procure toujours a ses 
clients un navigateur qui n'est autre que IE « personnalise ». 



De nouveaux challengers 

En juin 2002, d'apres OneStat, une societe specialisee dans l'analyse de 
trafic, Internet Explorer depasse la barre des 95 %. L'arrivee de 
Netscape Navigator 7.0 en version devaluation au mois de mai, suivie 
par celle de Mozilla 1 .0 au mois de juin, stabilise cependant le declin de 
Navigator. Le prochain abandon de IE par AOL devient de plus en plus 
probable : CompuServe, filiale d'AOL, utilise desormais un navigateur a 
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moteur Gecko. Le navigateur de Netscape aurait done finalement une 
chance de survivre. 

Debut 2005, avec 90 % du marche selon le cabinet d'etudes specialise 
WebSideStory, Internet Explorer est toujours, de loin, le navigateur 
Internet le plus utilise dans le monde, bien qu'ayant perdu un peu plus 
de cinq points depuis juin, principalement au benefice de Firefox, 
1' application de la fondation a but non lucratif Mozilla. Celui-ci s'adjuge 
pres de 5 % du marche en Janvier, contre 2,7 % en octobre 2004. Dans 
les mois qui suivent, Firefox continue sa progression, directement aux 
depens d' Internet Explorer. 

Au cours de l'ete 2005, Netscape jette l'eponge : la suite Mozilla 8, dont 
le nom de code etait Seamonkey, ne verra jamais le jour. L'equipe 
rejoint la Fondation Mozilla pour se consacrer au developpement de 
Firefox et de Thunderbird, le logiciel de messagerie frere. 

Entre 2005 et 2008, Firefox progresse de pres de 13 points, grignotant 
sur Internet Explorer et sur les autres produits bases sur Mozilla (la suite 
et Netscape). On peut remarquer les audiences de Safari (reserve aux 
derniers Mac OS X) a un peu plus de 1,5 %. Opera est desormais 
marginal avec 0,1 %. 



Tableau 2. 1 : Parts de marche des navigateurs Web entre Janvier 2005 

et Janvier 2008 d'apres Libstat, Mediametrie-eStat et Journal du Net 

(http://solutions.journaldunet.com/dossiers/chiffres/navigateurs.shtml 

et http://www. libstat. com /pages /navigateur. htm] 


Navigateur 


Pourcentage au 
01/2005 


Pourcentage au 
01/2007 


Pourcentage au 
01/2008 


Internet 
Explorer 


90,7 % 


85,3 % 


73,4 % 


Mozilla/Firefox 


8,1 % 


1 1 ,7 % 


20,7 % 
1,5% 


Safari 


1,2% 


1,6% 


Opera 0,3 % 


0,6 % 


0,1 % 


Autres 0,6 % 


0,3 % 


3,3 % 



Ces chiffres dependent toutefois largement du pays et du type 
d'utilisateur : selon certaines donnees, la part de marche de Firefox 
pourrait deja depasser 35 % en France chez les utilisateurs individuels 
(hors entreprises). 



LE GUIDE C0MPLET 39 



Chapitre 2 



Les outils Web 



II est egalement interessant d'examiner les systemes d' exploitation 
employes. Windows Vista atteint 13 %, Windows XP est credite de 
77 %. Les anciens Windows ne represented plus que 4 % des 
internautes francais. Mac et Linux progressent tout en restant modestes 
avec respectivement 3,5 et 0,3 % de ces internautes en Janvier 2008. 

Concretement, cela signifle que dans l'immediat vous devez tester vos 
pages avec Internet Explorer (de preference versions 6 et 7) et Firefox 
pour toucher pres de 96 % du public potentiel. Si possible, effectuez 
egalement un test avec Safari (sur une machine Mac), Netscape et 
Mozilla (sur une machine Windows) et enfin avec Konqueror sur une 
machine Linux. 



Tableau 2.2 : Comparaison entre navigateurs Web 
[source : http://kb.mozillazine.0rg/lntro_:_Comparison] 


Dispositif 


Mozilla 
Suite/Firefox 


Camino 


Opera [http: 
//opera.com/j 


Apple Safari 
[http://apple.com 
/safari/) 


Microsoft 

Internet 

Explorer 

(http://microsoft 

.com/windows/ie/) 


Plates- 
formes 
prises en 
charge 


Windows, 
Mac OS X, 
Linux, autres 


Mac OS X 


Windows 

Linux, 

Symbian [http: 

//symbian.com/j, 

Motorola 

[http://motorola 

.com/), autres 


Mac OS X 


Windows 


Cout 


Gratuit 


Gratuit 


39 $ [ou 
gratuit avec 
publicites] 


Integre 


Integre 


Open Source 


Oui (http: 

//mozilla. org 
/MPL/) 


Oui [http: 

//mozilla. org 
/MPL/) 


Non 


Partiellement 

(http://developer 

.apple.com 

/darwin/projects 

/webcore/) 


Non 


Onglets de 
navigation 


Oui 


Oui 


Oui 


Oui 


Avec un 

programme 

de tierce 

partie 

[comme 

MylE2] 

Oui 


Blocage des 
popup 


Oui 


Oui 


Oui 


Oui 


Gestionnaire 
de 

formulaires/ 
mots de 
passe 


Oui 


Oui 


Oui 


Oui 


Limite via 
modules 
complemen- 
taires 


Themes 


Nombreux 
[http://texturizer 
.net/firefox 
/themes/) 


Quelques- 
uns 


Nombreux 
(http://my.opera 
.com/community 
/customize/) 


Quelques- 
uns 


Via une 

application 

separee 
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Tableau 2.2 : Comparaison entre navigateurs Web 






(source : http://kb.mozillazine.org/lntro_ 


_:_Comparison) 
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Mozilla Camino 


Opera [http: 


Apple Safari 


Microsoft 




Suite/Firefox 
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(http://apple.com 
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Internet 
Explorer 

(http://microsoft 
. com/wind ows/ie/J 


Extensions 




Nombreuses Neant 


Neant 


Quelques- 


Quelques- 
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aboutxonfig] 


fichiers prefs 
et .ini) 




preferences 
et des 
fichiers du 
registre et de 










strategies) 



Vous trouverez dans 1' Annexe C les adresses ou vous procurer les 
differents navigateurs. II convient egalement de citer Lynx (http://lynx 
.browser.org/), un navigateur en texte seul largement employe par les 
personnes souffrant de handicaps visuels. II est souvent employe en 
combinaison avec un convertisseur texte-parole. 




Figure 2.B : Lynx, navigateur en texte seul, affichant la page d'accueil de 
Google. 



KEMAR0UE 



Convertisseurs texte-parole 

De nombreuses personnes handicapees, particulierement les 
malvoyants, ont recours a des convertisseurs texte-parole. II s'agit de 
programmes capables de lire a haute voix un document informatique. 
Ces convertisseurs emploient souvent une inflexion particuliere ou un 
signal lorsqu'ils rencontrent un element HTML particulier, si bien qu'il 
est deconseille d'utiliser de facon incorrecte ces elements si votre public 
est susceptible d'inclure des handicapes. Et, a moins que votre site ne 
soit pas present sur Internet, il est probable qu'il sera visite par un 
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REMARQUE 



nombre certain de handicapes. Ces convertisseurs font partie des 
agents utilisateurs HTML. 






REMSR2UE 



Pourquoi « agent utilisateur » plutot que « navigateur » ? 

Meme si les navigateurs sont probablement les principaux 
consommateurs de documents HTML et XHTML, d'autres programmes 
et systemes lisent ces documents. Par exemple les convertisseurs texte- 
parole que nous venons d'evoquer ou les moteurs de recherche qui lisent 
les pages Web sans etre des navigateurs. Le terme « agent utilisateur » 
sert a rappeler cette nuance. 

Une recherche sur Google montre ainsi parfois certains resultats stipulant 
« Cette page utilise des cadres, mais votre navigateur ne les prend pas en 
charge », ce qui peut dissuader certains utilisateurs de cliquer sur ce lien. 
L'auteur de ce site a oublie qu'il existait autre chose que des navigateurs : 
il aurait du placer un texte approprie dans un element nof rames 
(reportez-vous au Chapitre 7, traitant des jeux d'encadrement, pour plus 
de precisions a ce sujet) pour eviter ce probleme. 



2.3. Resume 



Un editeur HTML a pour but d'eviter la saisie manuelle souvent 
fastidieuse des caracteres speciaux, des codes couleur, de 
l'encodage des balises, etc. 

Les editeurs HTML peuvent etre commerciaux ou gratuits, 
WYSIWYG (What You See Is What You Get) ou en texte brut. 

Les navigateurs ne traitent pas tous le HTML de la meme facon : 
pour beneficier d'une audience maximale, il est important de 
connaitre ceux employes par votre public et d' adapter votre code 
en consequence. 

Le marche des navigateurs evolue avec le temps : Netscape 
Navigator, au debut le seul navigateur existant, a ete concurrence 
peu a peu par Internet Explorer qui l'a finalement supplante. Un 
nouveau venu, Firefox, s'implante de plus en plus. 

Un « agent utilisateur » est un programme capable de 
comprendre le langage HTML. Les navigateurs sont des agents 
utilisateurs visuels, mais il existe d'autres agents utilisateurs, 
comme les convertisseurs texte -parole (agents utilisateurs audio), 
les robots des moteurs de recherche, etc. 
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Vous avez choisi un ou plusieurs editeurs de pages Web, avez telecharge 
et installe eventuellement quelques navigateurs complementaires a fin de 
test : vous etes pret a passer a la conception de votre site. 

Elements etudies dans ce chapitre : 

1DOCTYPE 

HTML 

HEAD, TITLE, META 

BODY, Hn, P, A, BR 



3.1. Conception du site 



Tout d'abord, prenez un peu de temps pour reflechir, si possible avec 
une feuille de papier et un stylo. Pour bien concevoir votre site des les 
premiers instants, vous devez en prevoir des le debut sa structure et son 
contenu. II sera bien sur toujours possible de proceder a des 
modifications par la suite (vous n'y manquerez d'ailleurs pas), mais le 
temps consacre a cette reflexion initiale sera largement amorti ! 

Un site peut etre considere comme une arborescence contenant les 
elements suivants : 

Une page d'accueil, avec une barre de navigation. 

Une ou plusieurs pages secondaires, dont certaines peuvent 
egalement comporter une nouvelle barre de navigation : cela 
correspond a une nouvelle ramification de 1' arborescence. 

Eventuellement des pages tertiaires, et ainsi de suite... 

Le site le plus simple ne comporte qu'une page, tandis que les sites 
complexes peuvent posseder de tres nombreuses ramifications. Dans ce 
dernier cas, le site propose souvent une carte du site, destinee a faciliter 
la navigation des utilisateurs (voir Figure 3.1). 

Sur votre feuille de papier, commencez a tracer 1' arborescence de votre 
site, en figurant chaque page par un rectangle (pas trop petit !). Dans 
chaque rectangle, donnez un titre a la page, puis notez un apercu du 
contenu previsionnel. 

N'hesitez pas a repartir des informations trop abondantes en plusieurs 
pages. Les questions a se poser a ce stade sont les suivantes : 
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Figure 3. 1 : Page de plan du site du portail de I'administration francaise 
(www. service-public, fr '/aide /plan, html] 

Quel est le but de ce site ? 

L'information proposee est-elle utile ? 

Une meme page ne comporte-t-elle pas trop d' informations ? Si 
oui, est-il possible de diviser logiquement ces informations ? 

La structure obtenue est-elle equilibree et pertinente ? 

Dans le cadre de l'exemple de ce livre, le site envisage est presente dans 
la figure suivante. 



Page 
d'accueil 




Ma 
famille 



Mes 
passions 



Figure 3.2 : 

Ebauche du plan de 
notre site presente 
dans I'ouvrage 



LE GUIDE COMPLET 45 



Chapitre 3 



Conception de votre premiere page Web 



Cela fait, vous etes pret a debuter reellement la creation de la premiere 
page de votre site Web. Vous allez commencer par la page la plus 
importante, la page d'accueil. A la fin de ce chapitre, vous aurez cree 
une page identique a celle de la figure qui suit, dont le code est presente 
dans le listing suivant. 




Ma page d'accueil 

Bieiivenue sur mon site. 



Vous trouverez sur ce site des irrfonnations 
sur ma region ; 
sur ma famtile ; 
sur mes ; 

Ecrivez-moi !. 



T. 



~rr^ 



I Figure 3.3 : 

Page d'accueil telle que concue 



a la fin de ce chapitre 



Listing 3-1 : Page d'accueil telle que concue a la fin de ce chapitre (version 1.3.3) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 

<HTML> 

<HEAD> 

<TITLE>"Ma page d' accueil"</TITLE> 

<META name="author" content="mon nom"> 

<META name="version" content="l . 3 . 3"> 

</HEAD> 

<BODY> 

<H1 align="center">Ma page d' accueil</Hl> 

<H2 align="center">Bienvenue sur mon site.</H2> 

<P>Vous trouverez sur ce site des informations :<BR> 

sur ma <A href="region . html">region</A> ;<BR> 

sur ma <A href="famille . html">famille</A> ;<BR> 

sur mes <A href="passions .html">passions</A>.</P> 

<P align="center"XA href="mailto : votre_nom@votre_FAI"> 

Ecrivez-moi !</A>.</P> 

</BODY> 

</HTML> 

Nous allons proceder pas a pas pour la creation de cette page, en 
expliquant a chaque etape les instructions et elements employes. 
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3.2. Creation de la page d'accueil 

La page d'accueil est la page la plus importante d'un site : c'est elle qui 
incitera le visiteur a examiner plus en detail le site ou a le quitter 
immediatement. II existe de nombreuses facons de rendre attrayante une 
page d'accueil (ou d'ailleurs toute page) : vous les decouvrirez peu a 
peu au nl de la lecture de ce livre. 

II est frequent de se contenter d'une ebauche de page d'accueil au 
moment de la construction du site, pour la fignoler en dernier lieu. II ne 
s'agit done pour le moment que de creer une premiere page relativement 
simple. Gardez bien present a l'esprit que, a partir de HTML 4, le plus 
important concerne la structure de la page. La majorite des 
enjolivements sont facilement ajoutes par la suite. 

La demarche est ici tres similaire a celle recommandee lors de la 
redaction d'un document a l'aide d'un traitement de texte : vous 
commencez par une frappe « au kilometre », en privilegiant la structure 
(les phrases, paragraphes, chapitres et autres subdivisions) par rapport 
aux enrichissements qui ne seront apportes qu'ulterieurement, 
generalement a l'aide d'une feuille de style. 

En effet, une page Web n'est en realite guere plus qu'un fichier texte 
pourvu d'un ensemble de balises de specification permettant l'affichage 
dans un navigateur Web (il en va de meme dans votre traitement de 
texte, mais ces balises internes sont masquees). 

Pour insister sur ce fait, les premiers travaux seront effectues 
uniquement a l'aide du Bloc-Notes. Nous vous conseillons de creer sur 
votre disque dur, a l'emplacement de votre choix, un nouveau dossier 
nomme par exemple MonSiteWeb : vous y rassemblerez tous les fichiers 
du site Web. Sinon, par defaut, le Bloc-notes devrait creer vos fichiers 
dans Mes Documents. 



Instruction IDOCTYPE 

HTML ayant connu de nombreuses revisions pendant son histoire, il 
etait necessaire d'informer Vagent utilisateur de la version HTML 
employee. Cela est effectue a l'aide de l'instruction ! DOCTYPE 
(d'ailleurs automatiquement inseree en tete d'un document Web par la 
plupart des editeurs HTML). Vous verrez par la suite comment utiliser 
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! DOCTYPE lorsque vous aurez recours a des feuilles de style en cascade, 
a des cadres ou a XML. 

Commencez la creation de la premiere page de votre site. 

1 Ouvrez le Bloc-Notes (Demarrer » Tous les programmes » 
Accessoires » Bloc-notes Windows ou Demarrer » Executer » 
Notepad). 

2 Saisissez comme premiere ligne de votre document HTML : 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 

Linstruction <!DOCTYPE> indique ici que ce document 
respecte la definition de type de document HTML 4.01, telle 
que definie par le W3C et disponible a l'adresse www.w3.org/TR 
/REC-html4/loose.dtd Nous choisissons ici le DTD transitoire 
pour pouvoir par la suite employer les elements deconseilles 
(essentiellement ceux permettant de modifier la presentation 
dans le document HTML), interdits dans le DTD strict. 

Remarquez que cet element est depourvu de balise de 
fermeture. Vient ensuite l'element HTML signalant le debut 
d'un document HTML. 

3 Appuyez sur (Tjj], puis saisissez <HTML> pour debuter la page. 
Appuyez sur fjjj] , puis fermez immediatement l'element HTML en 
saisissant sa balise de fermeture </HTML>. 



KHM 



Fermez toujours un element apres I'avoir ouvert 

Meme si HTML tolere un certain nombre d'erreurs de syntaxe, une 
bonne habitude a prendre consiste a toujours fermer un element 
immediatement apres I'avoir ouvert, puis a saisir le contenu entre les 
deux balises. Cela evite d'oublier de fermer un element par la suite, ce 
qui peut entrainer des resultats inattendus. C'est d'ailleurs ainsi que 
procede un editeur HTML, comme vous le constaterez vous-meme. 



Par securite, enregistrez votre fichier sous le nom 
pageacc1_0.html. Assurez-vous de bien choisir une extension 
.html, meme si .htm pourrait etre suffisant, afin d'indiquer au 
navigateur que le fichier est de type HTML et doit etre interprete 
en consequence. Ne fermez ni le fichier ni le Bloc-notes. 
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Enregistrement au format HTML 

Selon l'outil d'edition employe, enregistrer un document au format 
HTML peut etre enfantin ou plus complexe. Un editeur Web utilise 
generalement par defaut le format HTML (avec comme extension .html 
ou .htm). En revanche, un editeur de texte simple, comme le Bloc -Notes, 
ou un traitement de texte, tel que Word ou WordPerfect, peuvent rendre 
necessaire de modifier le type de fichier lors de 1' enregistrement. Si vous 
eprouvez des difficultes a ouvrir un document Web cree a l'aide d'un 
traitement de texte ou d'un editeur de texte simple, verifiez 1' extension 
du nom du fichier et le type de fichier, afin de vous assurer qu'il a bien 
ete enregistre au format HTML. 



Element HEAD 

Le premier element enfant de l'element HTML est l'element HEAD. 
Celui-ci, l'en-tete du document, contient de nombreuses informations 
importantes qui interessent le navigateur. A l'exception du contenu de 
l'element TITLE, le contenu de l'element HEAD n'apparait pas dans ce 
qui est affiche directement dans le navigateur Web. Vous pouvez done y 
placer des commentaires, des informations destinees aux moteurs de 
recherche, des avertissements relatifs aux droits d'auteur, ainsi que du 
code de script. C'est egalement dans cet element que doivent se trouver 
les informations relatives aux feuilles de style. Cet element est le 
premier du fichier HTML a etre charge et done lu par le navigateur. 

1 Revenez au document precedemment cree (pageacd _0.html), s'il 
est toujours ouvert. Sinon, ouvrez le Bloc-Notes, puis ouvrez le 
fichier. 

2 Placez-vous en dessous de la balise d'ouverture <HTML> (mais 
au-dessus de la balise de fermeture </HTML>), appuyez sur fP] , 
puis saisissez <HEAD> pour debuter la section d'en-tete. Le 
contenu de cet element n'apparait pas dans le navigateur Web. 
Comme vous l'avez fait precedemment, et pour les memes 
raisons, fermez immediatement l'element HEAD en appuyant sur 
[<3 puis en saisissant sa balise de fermeture </HEAD>. 

Element TITLE 

Un element indispensable dans l'element HEAD est l'element TITLE 
(titre), qui definit le texte affiche dans la barre de titre de la fenetre de 
votre navigateur. 
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1 Placez-vous en dessous de la balise d'ouverture <HEAD>, appuyez 
a nouveau sur (Tjj], puis ajoutez la balise d'ouverture <TITLE> 
pour definir le titre de la page. Ce titre sera affiche dans la barre 
de titre de la fenetre du navigateur. Fermez l'element TITLE en 
saisissant </TlTLE>. 

2 Revenez juste apres la balise <TITLE>, puis saisissez le titre de la 
page, ici "Ma page d'accueil". Appuyez sur («3 

Element META 

Autre composant capital de l'element HEAD, l'element META est un 
moyen de procurer des informations concernant votre site aux moteurs 
de recherche, a d'autres auteurs Web et a des serveurs Web. Vous pouvez 
y placer pratiquement n'importe quel type d'information. Cet element 
est depourvu de balise de fermeture. 

Un element META est un element vide (depourvu de contenu) dont la 
syntaxe est la suivante : 

<META name=" valeur" content="valeur"> 

L'attribut name defmit ce que la valeur de content va decrire. Par 
exemple, la valeur de name peut etre "datetime" : 1' agent utilisateur 
sait alors que les chiffres et les lettres de content correspondent a une 
date et a une heure, probablement celles de la derniere modification. La 
balise de fermeture d'un element META est facultative. 






XHTML 

REWRdUE _. ,,, . , ,., , . „ ,.. , 

Comme pour tout element vide, un element met A doit etre redige 
comme suit en XHTML : 

<meta name="nom" content="contenu" /> 

Rien ne vous empeche d' adopter d'ores et deja cette syntaxe dans vos 
documents HTML. 



Un element HEAD peut posseder un nombre quelconque d'elements 
META. Ceux-ci permettent de fournir de nombreuses informations utiles 
concernant votre page, comme l'auteur ou la version, ce que vous allez 
faire maintenant. 

1 Placez-vous sur la ligne vierge en dessous de l'element TITLE. 
Saisissez <META name="author" content="votre nom"> 
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(ou votrenom est votre nom), appuyez sur (Tjj], puis saisissez 

<META name=" vers ion" content=" 1 . 0">. 

2 Par securite, enregistrez a nouveau votre fichier sous le nom 
pageacc1_0.html. Ne fermez ni le fichier ni le Bloc-Notes. 

Les elements MET A sont en outre particulierement utiles pour faire 
reconnaitre votre page par les robots de recherche du genre AltaVista ou 
Google. 

<META NAME="description" CONTENT="description de la page"> 

Cette balise indique que le contenu de CONTENT est la description de 
votre page HTML. Ce contenu pourra etre affiche par un moteur de 
recherche comme resultat d'une recherche d'un utilisateur. 

<META NAME="keywords" CONTENT="mot-clel, mot-cle2, ..."> 

Cette balise indique que le contenu de CONTENT est une serie de 
mots-cles qui definissent plus finement votre page. 

Autre element MET A frequent, celui qui indique le nom du generateur du 
document, generalement insere automatiquement par votre editeur 
HTML: 

<meta name="generator" content=" nom_du_generateur"> 



Figure 3.4 : 

Certains editeurs inserent 
automatiquement diverses 
instructions META, dont le nom du 
generateur. 
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Expressions anglophones 

Rien n impose que la valeur de name soit expnmee en anglais. Vous 
pouvez tout a fait legalement retenir name="auteur" et name="mots 
cles". Comme toutefois ces meta-informations sont generalement 
exploiters par des agents anglophones (la quasi-totalite des moteurs de 
recherche), mieux vaut, pour plus d'efficacite, conserver les expressions 
anglophones. 

Toute personne examinant le code source de la page peut lire les 
informations presentes dans 1' element head, mais celles-ci ne sont pas 
affichees dans le texte du document. 
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Affichage source 

Pratiquement tous les navigateurs permettent d'examiner le code 
HTML source d'une page Web affichee dans votre navigateur, a l'aide 
d'une commande ressemblant a Affichage » Source. Cette commande se 
trouve dans Internet Explorer, dans Netscape Navigator et dans Firefox 
dans le menu Affichage de la barre de menus. 



L'element HEAD doit egalement englober tout script et information de 
feuille de style, respectivement dans des elements SCRIPT, LINK et 
STYLE (nous y reviendrons par la suite). Un exemple d'un element 
HEAD simple est montre dans le Listing 3.2, correspondant a l'en-tete de 
la page presentee sur la figure suivante. 
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Figure 3.5 : Page d'accueil de MicroApplication 
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Figure 3.B : 

Acces au code source de la 
page d'accueil de 
MicroApplication depuis 
Internet Explorer 
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Figure 3. 7 : Acces au code source de la page d'accueil de MicroApplication 
depuis Firefox 

Listing 3-2 : Extrait de la section HEAD de la page d'accueil de MicroApplication 

<HEAD> 

<TITLE>Micro Application - Editeurs de livres d' informatique, 

de cd-rom et de papiers d' impression . </title> 

<META NAME="description" CONTENT="Edition de livres 

d' informatique, de cd-rom et de papiers d' impression . 15 

thematiques (bureautique, architecture, linux, windows, gravure, 

musique, mp3, culture, decoration, jeux de cartes, photo, 

programmation, creation de sites, impression, utilitaires) . "> 

<META NAME="keywords" CONTENT="micro application, librairies 

informatique, livres informatique, logiciel architecture, 

architecture 3D, logiciel decoration, logiciel gravure, papier 

imprimante, papier photo, impression papier, telechargement 

logiciels, jeux cartes, formation web, cartes visites, achat 

livres"> 

<META NAME="Author" CONTENT="Micro Application'^ 

■CLINK . . . > 

<SCRIPT>. . .</SCRIPT> 

</HEAD> 



Element BODY 

L' element BODY renferme l'essentiel : le corps du document. Tout son 
contenu est visible dans le navigateur : texte, graphismes, liens 
hypertextes, etc. La seule facon de masquer une information consiste a 
la placer dans une balise de commentaire. 

1 Revenez au document precedemment cree (pageacd _0.html) s'il 
est toujours ouvert. Sinon, ouvrez le Bloc-NotOes, puis ouvrez le 
fichier. 

2 Placez-vous apres la balise </HEAD>, appuyez sur (Tjj], puis 
debutez le corps du document en saisissant <BODY>. Comme 
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precedemment, refermez l'element BODY en appuyant sur (Tjj] puis 
en saisissant </BODY>. 

Comme cela a ete souligne, l'element BODY de votre page Web ne doit 
pas etre depourvu de structure et de forme : tout « bon » document doit 
posseder une structure organisee. Traditionnellement, la structure se 
compose de titres de niveaux divers et de paragraphes de texte. 

Titres : element Hn 

Les titres sont obtenus en HTML a l'aide de l'element Hn, ou n est un 
chiffre compris entre 1 et 6, correspondant au niveau du titre : HI est un 
titre principal (souvent identique au contenu de l'element TITLE), H2 un 
sous-titre, etc. 

3 Pour commencer une page « bien structured », debutez par un titre 
de niveau 1. Placez-vous a la fin de la balise <BODY>, puis 
appuyez sur fjjj] . Saisissez <Hlx/Hl> (pour refermer 
immediatement l'element). 

4 Placez-vous entre les deux balises, et saisissez ensuite le titre de 
la page : Ma page d' accueil (sans guillemets). Votre site Web 
possede maintenant un titre de premier niveau. 

5 Creez un titre de niveau 2 : placez-vous a la fin de la ligne 
precedente, appuyez sur [±j] puis saisissez <H2x/H2> (pour 
refermer immediatement l'element). Placez-vous entre les deux 
balises, et saisissez ensuite : Bienvenue sur mon site. 
Appuyez sur («3 

6 Toujours par securite, enregistrez a nouveau votre travail sous le 
meme nom. 

Un titre peut se trouver n'importe ou dans l'element BODY, c'est-a-dire 
dans le corps du document. II s'agit d'un element bloc, ce qui signifie 
qu'un saut de ligne est effectue avant et apres l'element. 

Le tableau suivant detaille les differents elements titre. 



Tableau 3. 1 : Element titre [Hn] 


Titre 


Balise 


Utilisation 


Titre 1 


<H1> 


Titre du niveau superieur : en general celui de la page ou 
un titre de chapitre. 
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Tableau 3. 1 : Element titre (Hn) 


Titre 


Balise 


Utilisation 


Titre 2 


<H2> 


Titre de second niveau : section ou partie d'un 
document. 


Titre 3 


<H3> 


Sous-sections d'un document : ces trois niveaux suffisent 
le plus souvent, en terme de structure. 


Titre 4 


<H4> 


Peu utilise pour la structure. 


Titre 5 


<H5> 


Peu utilise pour la structure, mais servant de facon 
abusive pour des avertissements en petits caracteres, 
comme des informations legales ou de droits d'auteur. 


Titre B 


<H6> 


Sert souvent de facon abusive pour des avertissements 
en petits caracteres, comme des informations legales 
ou de droits d'auteur. 



Les titres constituent un element essentiel de la structure d'un document. 
De nombreux auteurs les emploient toutefois comme raccourcis de mise 
en forme : au lieu de modifier directement la police d'un texte (ce qui 
est d'ailleurs a deconseiller), ils l'incorporent dans un element titre 
offrant un aspect similaire a celui qu'ils veulent obtenir. 

Techniquement parlant, cette utilisation est incorrecte, tous les 
navigateurs n'affichant pas les titres de la meme facon. II est toutefois 
exact que la plupart des navigateurs affichent les titres des trois niveaux 
superieurs (1 a 3) en polices de grandes tailles, tandis que les autres 
niveaux (5 et 6) sont affiches en polices plus petites, souvent en gras. 

Pour obtenir une structure parfaite, il est done deconseille de recourir 
aux titres uniquement pour obtenir 1' aspect souhaite : les niveaux de titre 
ne doivent pas presenter d'interruption. 

<H1>...</H1> 

<H2>...</H2> 
<H3>...</H3> 

<H3>...</H3> 

<H2>...</H2> 



est correct. 

<H1>...</H1> 

<H2>...</H2> 

<H4>...</H4> 
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<H4>...</H4> 
<H2>...</H2> 

ne Test pas. 

Si vous voulez obtenir l'aspect d'un titre de niveau 4 pour votre titre de 
niveau 3, modifiez le style de 1' element H3, de preference a l'aide d'une 
feuille de style. N'employer les titres qu'a des fins structurelles. Si votre 
public n'utilise que des navigateurs textuels (comme Lynx), ou si votre 
site s'adresse a des personnes souffrant de handicaps, les titres doivent 
etre utilises a bon escient. Cela epargnera a vos visiteurs employant des 
navigateurs en mode texte (comme Lynx) de serieuses difficultes lorsque 
leur navigateur « non standard » affichera (ou de lire a haute voix) votre 
texte de facon incoherente. Les convertisseurs texte-parole emploient en 
effet souvent une inflexion particuliere ou un signal lorsqu'ils 
rencontrent un element HTML particulier, comme justement un titre. 






Titres et moteurs de recherche 

WUMUE . . , ,, . 

Les pnncipaux moteurs de recherche se servent desormais 
principalement de la structure du document definie par les titres pour 
cataloguer un document. Initialement, ils n'avaient recours qu'aux 
elements title ou META, mais ils se sont rapidement rendu compte que 
des concepteurs peu scrupuleux surchargeaient ces elements de mots-cles 
n'ayant rien a voir avec le contenu reel du site, simplement pour attirer 
plus de visiteurs. 

En parcourant les titres, un moteur de recherche peut apprehender la 
structure du document et ainsi le cataloguer avec une meilleure precision. 
Si les elements essentiels de votre site apparaissent dans vos titres, votre 
page Web possede des chances maximales de se retrouver classee dans la 
categorie adequate, la ou la cherche le public vise. 



Titres de documents et outils de verification 

REMHtOtlE 

Les outils de verification HTML (comme le validateur W3C 
disponible a l'adresse http://validator.w3.org/) se servent egalement des titres 
pour reconstituer la structure du document. Cela sert generalement a 
l'auteur de la page : il peut regarder si la structure du document est bien 
representee par les titres, ou si la page gagne a etre reorganisee. 
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Paragraphes de texte : element P 

Toute page Web est essentiellement composee de texte : ne laissez 
jamais les graphismes attrayants, les animations epoustouflantes et 
autres complements vous masquer ce fait. Les gens vont sur le Web pour 
trouver des informations, pas pour admirer l'image d'un avion de ligne 
traversant l'ecran. 

L' element texte fondamental est le paragraphe defmi par 1' element P. II 
n'exige pas de fermeture (la balise </P> est facultative), bien que cela 
soit preferable pour creer une page structured possedant des exigences 
de validation stricte. 

Un simple retour chariot ne possede aucune signification en HTML : le 
navigateur n'en tient pas compte et ne le remplace meme pas par un 
simple espace. Pour commencer un nouveau paragraphe, veillez a bien 
employer la balise <P>. 

1 Revenez au document pageacc1_0.html. 

2 Creez un paragraphe : placez-vous sur la ligne vierge en dessous 
du titre de niveau 2, puis saisissez <px/p> (pour refermer 
immediatement l'element). Placez-vous entre les deux balises, et 
saisissez ensuite une phrase quelconque, par exemple : Vous 
trouverez sur ce site des informations sur ma 
region, ma famille et mes passions. 

3 Nous allons nous arreter la dans un premier temps. Enregistrez a 
nouveau votre fichier, toujours sous le nom pageacc1_0.html. 

Ce que vous avez saisi j usque-la devrait ressembler au listing suivant. 
Listing 3-3 : Premiere page d'accueil. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4 /loose . dtd"> 

<HTML> 

<HEAD> 

<TITLE>"Ma page d' accueil"</TITLE> 

<META name="author" content="mon nom"> 

<META name="version" content="l . 0"> 

</HEAD> 

<B0DY> 

<Hl>Ma page d' accueil</Hl> 

<H2>Bienvenue sur mon site.</H2> 

<P>Vous trouverez sur ce site des informations sur ma region, 

ma famille et mes passions . </P> 

</B0DY> 

</HTML> 
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II est temps d'examiner cette page a l'aide de votre navigateur. Ouvrez 
celui-ci, puis naviguez jusqu'au fichier pageacc1_0.html. Vous devriez 
voir quelque chose de similaire a ce qui est presente dans les figures qui 
suivent : aucune difference n'apparait que vous utilisiez Internet 
Explorer 6 ou Firefox. Remarquez que le contenu de l'element TITLE 
apparait dans la barre de titre de la fenetre du navigateur, le reste du 
contenu de l'element HEAD restant invisible : seul le contenu de 
l'element BODY est affiche. 





Fichier Edition Affichage Favoris Outils ? 
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Ma page d'accueil 

Bienvenue sur mon site, 

Vous trouverez sur ce site des Mormahons svs ma regtsu, mafarnille etrnes 
passions. 
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Figure 3.8 : 

L 'aspect de cette page 
avec Internet Explorer 
B 
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Ma page d'accueil 

Bienvenue sur mon site. 

Voiis trouversz sur ce sits des Informations siir ma region, ma famiile c-t raes 



7| Figure 3.9 : 

L 'aspect de cette page 
avec Firefox 



Difficile de faire plus simple ! Difficile aussi de faire plus laid, helas... 
En outre, pour le moment, il n'existe aucune relation entre cette page 
d'accueil et les autres pages du site, que nous avions pourtant prevues 
dans notre conception initiale. Nous allons d'abord ajouter les liens vers 
les autres pages, puis ameliorer un peu 1' aspect de la page. Nous 
creerons ensuite les pages secondares. 
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Lien hypertexte : element A 

Pour effectuer un lien entre une partie quelconque (ou presque) de votre 
page et une autre ressource Internet pouvant se trouver n'importe ou (sur 
la meme page, sur une page differente situee sur le meme site, sur une 
page situee sur un autre site, vers un fichier ou une image situe a un 
emplacement quelconque), il est fait appel a l'element A (anchor, 
signifiant « ancre »), un element de type ligne (sans saut de ligne apres 
l'element). 

Les liens hypertextes sont ce qui fait le World Wide Web (ou WWW, ou 
toile d'araignee mondiale). Ce sont eux qui permettent de passer de page 
en page et de site en site, d'un bout a 1' autre de la planete. En verite, cet 
element, pourtant simple d'utilisation, est probablement le plus 
important de tout le langage HTML, etant donne sa puissance 
intrinseque. 

La syntaxe de l'element A est la suivante : 

<A [name="nom_lien"] [id="id_lien" ] href="emplacement de la 
ressource">contenu servant de lien</A> 

Chaque element A definit une ancre. Au sein de cet element, l'attribut 
href fait de cette ancre la source d'exactement un lien, tandis que le 
contenu de l'element A definit la position de l'ancre. L'attribut name, 
facultatif, nomme l'ancre (pour qu'elle puisse etre la destination de zero 
ou plusieurs liens. II en est de meme de l'attribut id). 



Valeur d attribut 

Les auteurs peuvent egalement creer un element A qui ne specine 
aucune ancre (qui ne specine aucun attribut href, name ou id). Les 
valeurs de ces attributs peuvent etre fixees par la suite au moyen de 
scripts. 



Attribut href et URI 

La valeur de l'attribut href, emplacement_de_la ressource, porte le nom 
d' identifiant de ressource uniforme ou URI (Universal Resource Identifier), 
terme desormais prefere a l'ancien URL ou localisateur de ressource 
uniforme (URL, Universal Resource Locator). Le role d'un URI est 
capital : chaque ressource disponible sur le Web (document HTML, 
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image, sequence video, programme, etc.) possede une adresse 
representee sous la forme d'un URI. 

Un URI est forme de trois parties distinctes : 

1 Le nom du protocole servant a acceder a la ressource. 

2 Le nom de la machine hebergeant la ressource. 

3 Le nom de la ressource en question, indique sous la forme d'un 
chemin d'acces. 

Considerez comme exemple l'URI qui designe la page des rapports 
techniques (TR, Technical Reports) du W3C : 

http: //www. w3 . org/TR 

Cet URI peut etre compris comme suit : il est disponible via le protocole 
HTTP, heberge sur la machine nommee « www.w3.org », et accessible 
par le chemin « /TR ». 



1 \J} m 



HTTP 

RB4AW6E 

HTTP est le sigle de HyperText Transfer Communication Protocol. C'est 
le protocole, ou methode de communication, employe par un navigateur 
Web pour requerir une ressource Web aupres d'un serveur. Le terme 
http : // precede toujours une adresse URI ; il est place avant les noms 
du domaine et de la machine. Internet dispose d'autres protocoles de 
communication : HTTP securise (https), courrier electronique (mailto) 
et protocole de transfert de fichiers (ftp) sont tous d'autres exemples de 
protocoles largement utilises, que vous rencontrerez sans aucun doute. 



II s'agit ici d'une adresse URI dite exclusive, utilisee pour les sites situes 
a l'exterieur de votre propre domaine. 

II existe un autre type d' adresse URI, l'URI relative, qui localise un 
document selon sa relation avec le document actuellement visualise. Si 
le document courant est dans un dossier, et que le document lie (nomme 
pour 1' exemple cible.html) est dans ce meme dossier, il peut etre relie en 
utilisant simplement : 

<A href="cible .html"> 

Remarquez, pour les URI locaux, l'absence du prefixe http: //. 
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Au sein de la chaine de texte du chemin, vous pouvez employer les 
classiques modificateurs : 

. . / demande de monter d'un niveau dans l'arborescence par rapport au 
document actif : 

<A href=" . . /cible . html"> 

Pour atteindre un sous-dossier, saisissez son nom puis une barre oblique 
et enfin le nom du fichier, comme dans : 

<A href="dossier/cible . html"> 

Vous pouvez les combiner a votre guise : 

<A href =" . . /dossier/cible . html"> 

Une barre oblique placee au debut de l'URI signifie qu'il faut remonter 
a la racine du domaine : 

<A href="/cible .html"> 

Les agents utilisateurs restituent generalement les liens de facon a les 
mettre en evidence pour les utilisateurs (soulignage, video inverse, etc.). 
La restitution exacte depend de 1' agent utilisateur. La restitution peut 
varier si l'utilisateur a ou non deja visite le lien. De facon generale, le 
pointeur se transforme en main lorsqu'il se trouve sur un lien. 



L H,^W'TWHH^^..-M.HIII.HI..I I Mil. .11. .1.. II, «.,.!. IB— 
t&rtr E*«n at*«**j> tttt i f**!ue paw* Oflf J 
C ,-l * ' [§r l^f | Ml Hxy.Hrtmt w oapriktf ■>-■ '■ frA ■ Itfrn m :i- i^jjuinvj ratLW-t ^j OK \',CL 



+ tAmaq* DhAHlmA,. tfidt hj-tata :6*... *» raffcthBp^thcrlv.. .. 49) DMtwIa)*] ■*• To* HcncGay 




Figure 3. 10 : La plupart de navigateurs signalent un lien, et I'affichent de 
facon differente lorsqu'il a deja ete visite (ici, Logiciels en telechargement). 



Attributs name et id 

Ces attributs specifient un nom ou un identifiant pour l'ancre, de facon a 
ce que celle-ci puisse etre ciblee par un autre lien. lis partagent le meme 
espace de noms, ce qui signifie qu'ils ne peuvent pas tous deux definir 
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une ancre avec le meme nom dans le meme document. Quand les deux 
attributs sont utilises sur un meme element, leurs valeurs doivent etre 
identiques. 

Voici une ancre nommee : 

<A name="intro">Introduction</A> 

Pour y faire reference depuis une autre ancre, vous procedez comme 
suit : 

<A href="#intro">Introduction</A> 

Ce qui pourrait etre mis en ceuvre comme suit : 

<Hl>Sommaire</Hl> 

<P><A href="#intro">Introduction</AXBR> 

<A href="#historique">Historique</AXBR> 

<A href="#chapl">Chapitre 1 </AXBR> 

. . . le reste du tableau des matieres... 

. . . le corps du document. . . 

<H2><A name="intro">Introduction</A></H2> 

. . . contenu . . . 

<H2XA name="historique">Historique</Ax/H2> 

. . . contenu . . . 

<H3xA name="histol">Au commencement</Ax/H3> 

. . . contenu . . . 

Nous presentons ici l'attribut name employe avec un element a, mais 
une ancre sert en realite rarement de cible a une autre ancre. L'attribut 
name n'est employe que pour relativement peu d'elements. L'attribut 
id joue en revanche un role analogue et peut etre employe avec tous les 
elements sauf BASE, HEAD, HTML, META, SCRIPT, STYLE et TITLE. 
L'exemple precedent serait ainsi plus probablement ecrit : 

<Hl>Sommaire</Hl> 

<PXA href="#intro">Introduction</AXBR> 

<A href="#historique">Historique</AXBR> 

<A href="#chapl">Chapitre 1 </AXBR> 

. . . le reste de la table des matieres... 

. . . le corps du document. . . 

<H2 id="intro">Introduction</H2> 

. . . contenu . . . 

<H2 id="historique">Historique</H2> 

. . . contenu . . . 

<H3 id="histol">Au commencement</H3> 

. . . contenu . . . 

Notez qu'une ancre (ou lien) ainsi employee porte frequemment le nom 
de signet, pour la differencier d'un lien menant vers une autre page Web. 
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II est egalement possible de concevoir un lien hypertexte qui declenche 
l'envoi d'un courtier electronique lorsqu'un utilisateur clique dessus. Au 
lieu de http://, utilisez mailto: suivi de l'adresse electronique de 
destination : 

<A "mailto:mon_nom@monFAI.fr"> 

Remarquez, pour un lien de message electronique, 1' absence de barre 
oblique. 

Ajoutez maintenant des ancres a votre page d'accueil. 

1 Ouvrez le Bloc-Notes, puis le fichier precedemment cree 
(pageacd _0.html). 

2 Vous allez modifier la version en entrant comme suit la balise 
MET A stipulant la version : 



<META name="version" content="l . 3 . 2"> 



^3 



remsroue 



Convention sur les numeros de version 

Traditionnellement, un numero de version comporte deux ou trois 
nombres separes par des points. Le premier nombre, a gauche, 
correspond au numero de version majeur : il reste identique tant que des 
modifications radicales n'ont pas ete apportees. Le second numero 
correspond au numero de version mineur : des modifications plus 
secondaires. Le troisieme nombre, s'il est present, correspond 
generalement a des modifications tres secondaires, souvent liees a 
l'eradication de bogues ou la correction d'erreurs. 

Dans le cadre de ce livre, nous employons la convention suivante, tres 
proche de la convention academique : 

le premier nombre correspond a la version majeure ; 

le second correspond au chapitre concerne ; 

le troisieme, a l'ordre d'apparition du code dans le chapitre. 

La nouvelle version de notre page d'accueil est done la 1.3.2. 



Vous allez maintenant creer des ancres. Celles-ci vont pour le moment 
pointer vers des pages inexistantes, mais cela n'a pas encore 
d' importance. 

3 Inserez l'element lien hypertexte avant le mot ou la phrase et 
n'oubliez pas de fermer l'element A apres le mot servant de lien : 
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<P>Vous trouverez sur ce site des informations sur ma 

<A href="region.html">region</A>, ma <A href ="famille. html "> 

famille</A> ; et mes <A href="passions.html">passions</A>.</P> 

Remarquez qu'il est employe ici un lien relatif : les fichiers 
region.html, famille.html et passions.html seront places dans le 
meme dossier que la page d'accueil. 

4 Ajoutez un nouveau lien permettant de vous envoyer un message. 
Placez-vous apres la balise </P>, appuyez sur {^} et saisissez sur 
la nouvelle ligne : 

<P align="center"XA href ="mailto : votre_nom@votre_FAI"> 
Ecrivez-moi !</A>.</P> 

votre _nom@votre_FAI correspond bien stir a votre adresse 
electronique. 

5 Enregistrez votre fichier sous le nom pageacd _3_2.html, mais ne 
fermez pas le Bloc-Notes. Le code complet de cette page est 
presente dans le listing qui suit. 

Listing 3-4 : Page d'accueil modifiee (version 1.3.2) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 

<HTML> 

<HEAD> 

<TITLE>"Ma page d' accueil"</TITLE> 

<META name="author" content="mon nom"> 

<META name="version" content="l . 3 . 2"> 

</HEAD> 

<B0DY> 

<Hl>Ma page d' accueil</Hl> 

<H2>Bienvenue sur mon site.</H2> 

<P>Vous trouverez sur ce site des informations sur ma 

<A href="region . html">region</A>, ma <A href="famille . html"> 

famille</A> et mes <A href="passions .html">passions</A>.</P> 

<P><A href="mailto: votre_nom@votre_FAI">Ecrivez-moi !</A>.</P> 

</B0DY> 

</HTML> 

Examinez cette nouvelle page dans votre navigateur. Ouvrez celui-ci, 
puis naviguez jusqu'au fichier pageacd _3_2.html. Vous devriez voir 
quelque chose de similaire a ce qui est presente dans la figure suivante. 
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Ma page d'accueil 

Bicnvcnuc sur mon site. 

Vous trouverez sur ce site des informations 
sur ma region ; 
sur ma famiHe , 
sur mes 

Ecnvez-moi !. 



Figure 3.11 : 

Aspect de la page Web modifiee 

Essayez de cliquer sur un des liens : vous obtenez un message d'erreur, 
variable selon le navigateur. C'est normal : les pages secondaires 
n'existent pas encore ! Vous y remedierez sous peu. 



I ^^2 



Impossible de trouver le fichier i'i) iHTr1L/Mon5it.e/region.nt.m!, Verifies son emplacement et 
! \ essayez a m 



Figure 3. 12 : 

Message d'erreur 
indiquant un lien 
rompu 



Element saut de ligne BR 

Nous avons dit que les elements Hn et P, deja examines, etaient des 
elements de type bloc, qui debutent sur une nouvelle ligne et inserent 
apres eux un saut de ligne. Nous avons egalement souligne que HTML 
ne reconnaissait pas les sauts de ligne inseres dans le contenu d'un 
element. II est pourtant parfois necessaire d'effectuer manuellement un 
passage a la ligne sans pour autant changer d'element (de bloc), par 
exemple pour posseder un titre reparti sur deux lignes ou pour diviser un 
paragraphe trop long. Cela s'effectue en inserant un element vide BR, de 
type ligne : 

1 Revenez dans le Bloc-Notes au fichier precedent 
(pageacc 1 _3_2.html) . 

2 Vous allez encore modifier la version. Entrez comme suit la balise 
META stipulant la version : 
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<META name="version" content="l . 3 . 3"> 

3 Vous allez maintenant inserer des sauts de ligne entre les 
differents themes dans le (seul) paragraphe de texte. Commencez 
par : 

<P>Vous trouverez sur ce site des informations :<BR> 
sur ma <A href="region . html">region</A> ;<BR> 
sur ma <A href="famille . html">famille</A> ;<BR> 
sur mes <A href ="passions . html">passions</A>. </P> 

Remarquez que le texte a ete un peu modifie. Les passages a la 
ligne employes dans le code presente (apres les balises <BR>) 
permettent uniquement d' ameliorer sa lisibilite : ils sont 
ignores par HTML. Tout le contenu de l'element P aurait pu 
etre saisi sur la meme ligne. 

Vous pouvez inserer un saut de ligne ou vous voulez dans l'element 
BODY pour obtenir un saut de ligne a l'ecran : entre deux elements bloc, 
entre deux elements ligne, au sein d'un contenu texte, etc. 



XHTML 

REMARQUE . , . ., , „, TIr ™ , T ,,„, 

Si vous souhaitez etre compatible XHTML, 1 element vide BR doit 
etre code <br />. 



Attributs d'alignements 

Pour encore ameliorer l'aspect d'un titre (ou d'un paragraphe), il serait 
utile de pouvoir agir sur 1' alignement. 

HTML dispose d'un attribut d' alignement applicable a de nombreux 
elements, align. 

Vous allez un peu ameliorer l'aspect de la premiere page en jouant sur 
F alignement. 

1 Revenez dans le Bloc-Notes au fichier precedent 
(pageacc 1 _3_3.html) . 

2 Centrez les deux titres, a l'aide de 1' attribut align : 

<H1 align="center">Ma page d' accueil</Hl> 

<H2 align="center">Bienvenue sur mon site.</H2> 

3 Modifiez le lien qui permet de vous envoyer un message. Ajoutez 
ce qui suit : 
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<P align="center"XA href="mailto : votre_nom@votre_FAI"> 
Ecrivez-moi !</A>.</P> 

4 Enregistrez votre fichier sous le nom pageacd _3_3.html. Le code 
complet de cette page est presente dans le Listing 3.4. 

5 Pour la bonne forme, nous allons egalement creer le squelette des 
autres pages. En partant du fichier actuellement ouvert, 
commencez par modifier 1' element TITLE : 

<TITLE>"Ma region "</TITLE> 

6 Modifiez ensuite le titre et le sous-titre . . . 

<H1 align="center">Ma region </Hl> 

<H2 align="center">. . . a completer .</H2> 

7 ... puis le paragraphe de texte : 

<P>. . . a completer .</P> 

8 Vous pouvez a votre guise conserver ou supprimer la ligne 
etablissant un lien vers un message electronique. En revanche, il 
est capital de toujours prevoir sur une page secondaire un lien 
vers la page d'accueil principale. Ajoutez done la ligne suivante, 
juste avant la balise </BODY> : 

<P align="center"XA href="pageaccl_3_3 . html">Retour vers 
la page d' accueil</Ax/P> 

9 Enregistrez ce fichier sous le nom region.html. 

10 Creez ensuite les deux autres pages (famille.html et passions.html), 
en modifiant comme il se doit le contenu des elements TITLE et 
HI. 

L'attribut align possede plusieurs valeurs possibles, dont la 
signification est presentee dans le Tableau 3.2. Remarquez toutefois que 
son emploi avec des titres et paragraphes est desormais deconseille : 
mieux vaut recourir aux feuilles de style, que vous decouvrirez dans le 
Chapitre 8. 



Tableau 3.2 : Valeurs d'alignement des paragraphes 
Attribut de p Alignement de texte 

<P align="left"> Alignement a gauche. 
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Tableau 3.2 : Valeurs d'alignement des paragraphes 

Attribut de F Alignement de texte 

<P align="right"> Alignement sur la marge de droite, sans 
justification a gauche : celle-ci est plutot 
desordonnee, mais cette disposition est pratique 
dans le cas d'images et de colonnes de texte. 



<p 
align="center"> 

<P 

align=" justify "> 



Le texte est centre. 



Le texte est justifie, comme avec un traitement de 
texte. 



Listing 3-5 : Page d'accueil modifiee (version 1.3.3). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose . dtd"> 

<HTML> 

<HEAD> 

<TITLE>"Ma page d' accueil"</TITLE> 

<META name="author" content="mon nom"> 

<META name="version" content="l . 3 . 3"> 

</HEAD> 

<BODY> 

<H1 align="center">Ma page d' accueil</Hl> 

<H2 align="center">Bienvenue sur mon site.</H2> 

<P>Vous trouverez sur ce site des informations :<BR> 

sur ma <A href="region . html">region</A> ;<BR> 

sur ma <A href="famille . html">famille</A> ;<BR> 

sur mes <A href="passions . html">passions</A>.</P> 

<P align="center"XA href="mailto : votre_nom@votre_FAI"> 

Ecrivez-moi !</A>.</P> 

</BODY> 

</HTML> 

Examinez votre nouvelle page d'accueil dans votre navigateur. Ouvrez 
celui-ci, puis naviguez jusqu'au fichier pageacd _3_3.html. 
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Figure 3.13 : 

Page d'accueil 
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Cliquez sur un lien : vous accedez a l'une des nouvelles pages. 
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Ma region 






... ii completer. 






... a completer. 






Ecnvez-moi !. 






Retourv d'accueil 






T ermine 





Figure 3. 14 ; 

Une des pages secondares 



Revenez a la page d'accueil, testez les autres liens, puis, revenu sur la 
page d'accueil, testez le lien d'envoi de courriel : votre logiciel de 
messagerie s'ouvre. 



JsJjsI 



Fichier Edition AFfichage Inserer Format Options Outils Aide 



>3 S3 f <P - fii - £ 

Envoyer Contacts Orthographe Joindre 5ecurite Enregistre 



Expediteur : Fabrice Lemainque <webmas!:eri3>orignal.org> ■ webmasterOorignal.org _^J 



[= 



Pour : [£) votre_nom@votre_FAI 






A A B I U 



Figure 3.15 : 

Logiciel de messagerie lance 
a partir de la page 



3.3. Resume 



L'instruction ! DOCTYPE permet de stipuler la DTD (Document 
Type Definition) employee pour le document HTML. 

Un document HTML se compose d'un element parent HTML qui 
contient des elements enfants HEAD et BODY. 

La seule information affichee par le navigateur appartenant a 
l' element HEAD est le contenu de l' element TITLE, figurant dans 
la barre de titre de la fenetre. Les elements META de l' element 
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HEAD servent a fournir des meta-informations employees par 
certains agents utilisateurs (comme les robots des moteurs de 
recherche), dont les mots-cles, une description, l'auteur, la version 
et le generateur de la page. 

L' element BODY constitue le corps du document : tout son contenu 
est visible dans le navigateur. 

Ce contenu doit etre structure de facon logique. HTML propose 
les elements Hn pour des titres de niveaux differents, ainsi que 
1' element P pour un paragraphe de texte. 

Les liens hypertextes sont crees a l'aide de l'element A suivi de 
l'attribut href stipulant la cible du lien. Cet attribut href est 
suivi d'un nom de protocole, comme http:/ ou mailto:, 
specifiant le type de cible et Taction a suivre. 

Un lien hypertexte peut etre absolu ou relatif. 

Un saut de ligne est obtenu a l'aide de l'element vide BR. 

Les titres et les paragraphes admettent l'emploi de l'attribut 
align pour obtenir un alignement particulier. Cet attribut est 
toutefois desormais deconseille : mieux vaut recourir aux feuilles 
de style. 
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Une page Web est composee avant tout de texte. Toutefois, toutes les 
donnees et informations placees sur un site Web doivent passer par un 
nitre final avant de pouvoir etre lues par un etre humain : elles doivent 
etre affichees a l'ecran. 

La lecture a l'ecran, malgre les progres realises par les concepteurs 
d'ecrans, reste plus malaisee que la lecture d'un document imprime ou 
projete. La majorite des internautes rechignent a lire de longs textes en 
ligne, preferant souvent les imprimer pour les relire a tete reposee. 

Une conception intelligente d'un site Web doit prendre en compte ces 
contraintes inevitables. Malgre son importance, mieux vaut limiter le 
texte. Aerez-le toujours au maximum. Recourrez aux espaces vierges 
pour reposer la vue. 

Voici quelques regies simples : 

Placez toujours les informations importantes en haut de l'ecran. 

Pour etre efficace, un ecran (une page) ne devrait jamais 
comporter plus de sept informations distinctes. 

Seuls les 100 premiers mots permettent a l'utilisateur de decider 
si le document est interessant. Un document destine a un public 
general ne devrait jamais exceder 500 mots. 

Cela ne veut pas dire que les longs articles sont proscrits sur le Web, 
mais mieux vaut les rendre accessibles a l'aide d'un lien explicite, par 
exemple, « Exemple extrait du Chapitre 1 » ou « Table des matieres 
detaillee ». 

Si ce chapitre va vous aider a afficher votre texte de facon a ce qu'il soit 
facilement lisible et comprehensible, il reste de votre ressort de faire en 
sorte que le sujet soit interessant et susceptible d'attirer le public 
concerne ! 

Les pages realisees jusqu'ici sont d'une extreme simplicite. HTML 
propose de nombreux autres elements structuraux pour ameliorer tant la 
structure que, par la suite, le rendu ou l'affichage des pages. 

Au cours de ce chapitre, nous allons examiner les listes et les tableaux 
des elements fondamentaux de toute page Web reussie. 
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Elements et attributs etudies dans ce chapitre : 

OL (type, start, type) , LI (type, value) 

UL (type), LI (type) 

DL, DT, DD 

TABLE (summary, align, border, frame, rule, cellspacinc 

cellpadding, width) 
CAPTION 

TR, TD, TH (align, valign, width, rowspan, colspan) 
THEAD, TBODY, TFOOT 
COLGROUP, COL (span, width) 



4.1. Listes 

II existe en HTML trois types de listes qui permettent d'apporter un peu 
plus de structure a un document : 

Les listes ordonnees ou numerotees. 

Les listes non ordonnees ou listes a puces. 

Les listes de definitions. 

II est egalement possible d'imbriquer des listes, meme de types 
differents. 



Liste ordonnee : elements OL et LI 

Une liste numerotee (ou ordonnee) incremente automatiquement chaque 
element de la liste. Ce systeme de numerotation automatique est tres 
utile, car il simplifie d'autant la saisie. 

Creer une liste numerotee est d'une extreme simplicite. Vous debutez la 
liste en ouvrant l'element liste OL (Ordered List, liste ordonnee), puis 
poursuivez par chaque membre de la liste, precede de la balise 
d'element de liste, <LI>. La balise de fermeture </Ll> est facultative 
mais recommandee. En revanche, l'element liste lui-meme doit 
imperativement etre ferme. 

<0L> 

<LI>Premier element</LI> 

<LI>Deuxieme element</LI> 

<LI>Dernier element</LI> 
</0L> 
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U1HBIWIBTO1 




<?-< © [lTEI © ok [ST 

Liste ordoiinee 



1. Premier element 

2. Deuiaeme 6I6meDi 



3. Dernier element 






Figure 4. 1 : 

Exemple de liste ordonnee 



ASTUEE 



Test 

Les fragments de code ainsi presentes sont des extraits d'une page 
complete. Si vous souhaitez les tester, le mieux est de construire une 
page type nommee par exemple test.html, avec un squelette de page 
(instruction Idoctype, elements html, head et body) , et de saisir 
simplement dans l'element body l'extrait de code propose. 



L'element OL peut posseder un argument start, specifiant le numero 
commencant la sequence. Par exemple, avec <OL start="2">, le 
premier membre de la liste porte le numero 2. 

Les elements LI et OL peuvent posseder un attribut type, qui permet de 
definir le mode de numerotation de la liste. Employe pour un element LI 
individuel, il ne s' applique qu'a cet element. Insere en revanche a 
l'interieur de la balise <OL>, il agit sur la totalite de la liste. Voici les 
valeurs possibles pour l'attribut type : 

1 : Chiffres arabes (valeur par defaut) 

a : Lettres minuscules 

A : Lettres majuscules 

i : Chiffres romains en minuscules 

I : Chiffres romains en majuscules 

value, employe uniquement avec un element LI, reinitialise l'ordre de 
la sequence. Ainsi, avec <LI value="8">, le membre suivant 
possedera automatiquement une value de 9. 
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Figure 4.2 : 

Exemple de liste ordonnee, avec emploi 
des attributs type="A", start="2" pour 
/'element OL et value="9" pour le dernier 
element LI. 



L'emploi des attributs start, type et value est desormais deconseille 
au profit des feuilles de style. 



9' 



Combiner les attributs 

II est possible de combiner les attributs start et type : le premier 
membre de la liste apparait avec la valeur start dans le type specifie. 
Ainsi, <0L type="i" start="4"> aboutit-il a un premier membre 
designe par "iv". 



Liste a puces : elements UL et LI 

Une liste a puces ressemble enormement a la precedente, si ce n'est que 
la numerotation est remplacee par des puces. Une liste a puces est un 
element UL (Unordered List, liste non ordonnee) qui renferme un nombre 
quelconque d' elements LI. Comme pour une liste ordonnee, I'element 
UL doit imperativement etre ferme. 

<UL> 

<LI>Premier element</LI> 

<LI>Deuxieme element</LI> 



<LI>Dernier element</LI> 
</UL> 


TrfWf EdfcKKl 
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- I-. 


Liste ii puces 

» Premier iLnnmt 


ten* 



Figure 4.3 : 

' Exemple de liste a puces 



LE GUIDE COMPLET 75 






Listes et tableaux 



Vous pouvez modifier le style des puces grace a l'attribut type. La 
aussi, il peut s'appliquer a un element LI individuel ou, insere dans la 
balise <UL>, agir sur la totalite de la liste. Voici les valeurs possibles 
pour l'attribut type, lorsqu'il est employe dans une liste non ordonnee : 



Tableau 4. 1 : Valeurs possibles de l'attribut type 
Valeur Signification 

Disc Rond plein [valeur par defaut) 

Square Carre plein 

Circle Cercle vide 



L'emploi de l'attribut type est desormais deconseille au profit des 
feuilles de style. 
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Liste a puces (2) 






♦ Premier element 






■ Demaeme element 






Q Dernier element 






Termine 





Figure 4.4 : 

Exemple de liste a puces, avec 
emploi des trois valeurs possibles 
pour l'attribut type. 

Les listes sont tres agreables en HTML : elles sont d' emploi facile tout 
en etant d'une extreme souplesse. II est tres facile de transformer une 
liste numerotee en liste a puces et inversement, simplement en modifiant 
les balises de debut et de fin. Attention toutefois aux surprises si vous 
avez employe les attributs deconseilles, les valeurs licites pour ces 
attributs etant differentes selon le type de liste ! 



Liste de definitions : elements DL, DT et DD 

Une liste de definitions est l' equivalent d'un tableau de deux colonnes, 
la premiere renfermant les mots ou expressions a definir et la seconde 
les definitions elles-memes. 
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II est possible de creer une liste de definitions a l'aide de l'element DL 
(Definition List, liste de definitions), dont le contenu est compose 
d' elements DT (Definition Term, terme de definition) et d' elements DD 
(Definition Description, description de definition) correspondants. Voici 
un exemple de code, avec la copie d'ecran correspondante. 

<H1 align="center">Elements d'une liste de def initions</Hl> 

<DL> 

<DT>DL</DT> 

<DD>Element liste de def inition .</DD> 

<DT>DT</DT> 

<DD>Element terme de def inition</DD> 

<DT>DD</DT> 

<DD>Element description de la def inition</DD> 

</DL> 



LJILNJ.U.U.I.IIJU. 
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Element liste de definition. 




DT 




Element terme de definition 




DD 




Element description de !a definition 


J 


T ermine 







Figure 4.5 : 

Liste de definitions 



Vous avez decouvert les listes. Ne trouvez-vous pas que notre page 
d'accueil presente ce qui ressemble furieusement a une liste ? Autant la 
modifier... 

1 Revenez dans le Bloc-Notes au fichier precedent 
(pageacc 1 _3_3.html) . 

2 Comme d' habitude, vous modifiez la version. Entrez comme suit 
la balise MET A stipulant la version : 

<META name="version" content="l . 4 . 1"> 

3 Placez-vous a la fin de la ligne 

<P>Vous trouverez sur ce site des informations :<BR> 

et remplacez la balise <BR> par une balise </P>, puis appuyez sur 
(+3 pour creer une nouvelle ligne. 
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4 Saisissez sur celle-ci <UL> pour debuter une liste a puces. 

5 Placez-vous au debut de la ligne 

sur ma <A href="region . html">region</A> ;<BR> 

Saisissez <LI>, puis remplacez la balise <BR> par </Ll>. 

6 Faites de meme pour la ligne suivante. Saisissez au debut de la 
troisieme ligne <LI>, puis remplacez la balise de fermeture </P> 
par </Ll>, appuyez sur {^} puis saisissez </UL> pour fermer la 
liste. Ce fragment de code devrait desormais ressembler a ceci : 

<P>Vous trouverez sur ce site des informations :</P> 

<UL> 

<LI>sur ma <A href="region. html">region</A> ;</LI> 

<LI>sur ma <A href="famille . html">famille</A> ;</LI> 

<LI>sur mes <A href="passions .html">passions</A>. </LI> 

</UL> 

7 Enregistrez votre fichier sous le nom pageacd _4_1 .html. 

Examinez cette page a l'aide de votre navigateur. Son aspect est 
desormais plus agreable. 
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Ma page d'accueil 






Bienvenue sur mon site. 




Vous trouverez sur ce site des irfbnnatioris : 




* sur ma region ; 




* sur ma farnille ; 




* sur mes passions. 






Termine 



Figure 4.6 : 

Page d'accueil avec liste a puces 

Testez les liens. Tout va bien, mais lorsque vous voulez revenir a votre 
page d'accueil, vous obtenez une des anciennes versions. Pourquoi ? 
Tout simplement parce que vous n' avez pas modifie le nom de la cible 
(attribut href) dans les pages secondaires. Le lien stipule toujours : 

<A href="pageaccl_3_3 . html">Retour vers la page d' accueil</A> 

Ce type d'erreur est particulierement frequent (autant qu'exasperant !). 
Vous verrez par la suite une des facons de l'eviter, grace notamment a 
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l'aide d'une barre de navigation, mais void deja quelques regies et 
astuces simples permettant d'eviter au moins partiellement ce piege : 

1 Ne modifiez un nom de fichier comportant un numero de version 
qu'en cas de modification au moins mineure (par exemple ici, le 
passage de la version 1.3 a la 1.4). II est en principe inutile de 
noter ainsi les modifications reellement secondaires, qui ne sont 
souvent que des corrections de bogues. En revanche, pensez a 
actualiser le contenu de votre balise <META name ="version" 
content="numero de version">. 

2 Une bonne habitude a prendre consiste a archiver regulierement 
tous les fichiers composant le site, et au minimum lors d'un 
changement de version mineure. Vous pouvez ainsi compacter, 
par exemple dans un fichier nomme ici MonSitev1_3.zip, tous les 
fichiers crees et employes jusque-la (sauf pageacd _4_1 .html). 

3 Idealement, cette archive (ou une copie) devrait etre stockee a un 
autre emplacement : en cas d' incident, vous pourriez ainsi revenir 
a la version anterieure. 

4 Supprimez ensuite de la racine du site les fichiers superflus (ici, 
les fichiers pagacd _3_x.html). 

5 Enfin, modifiez les fichiers presentant dans la nouvelle version 
des problemes (liens ou autres) en corrigeant les erreurs. 

Remarquez que c'est exactement la demarche que nous avons retenue, 
puisque les differentes archives MonSite correspondent a chaque 
chapitre. 



Listes imbriquees 

II est tres facile d'imbriquer des listes, meme de types differents. Pour ce 
faire, debutez simplement une nouvelle liste plutot que de creer un 
nouveau membre de liste. La nouvelle liste se comporte comme une 
subdivision du membre le precedant immediatement. Voici un exemple : 
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Creation d'une liste imbriquee 
avec un editeur de texte 



Listing 4-1 : Exemple de code de listes imbriquees 


1 


<Hl>Arguments et valeurs possibles dans des listes</Hl> 


2 


<0L type="I"> 


3 


<LI>Liste ordonnee</LI> 


4 


<UL type="square"> 


5 


<LI>Element 0L</LI> 


6 


<DL> 


7 


<DT>start</DT> 


8 


<DD>valeur de debut de la numerotation</DD> 


9 


<DT>type</DT> 


10 


<DD>1, Chif f res arabes (valeur par defaut)<BR> 


:: 


a 


Lettres minuscules<BR> 


12 


A 


Lettres majuscules<BR> 


13 


I 


Chiffres romains en minuscules<BR> 


14 


I 


Chif f res romains en majuscules</DD> 


15 


</DL> 


16 


<LI>Element LK/LI> 


17 


<DL> 


18 


<DT>value</DT> 


19 


<DD>valeur de reinitialisation de la numerotation</DD> 


20 


<DT>type</DT> 


21 


<DD>1, Chif f res arabes (valeur par defaut)<BR> 


22 


a 


Lettres minuscules<BR> 


23 


A 


Lettres majuscules<BR> 


24 


I 


Chiffres romains en minuscules<BR> 


25 


I 


Chiffres romains en majuscules</DD> 


26 


</DL> 


27 


</UL> 


28 


<LI>Liste a puces</LI> 


29 


<UL type="square"> 


30 


<LI>Element UL</LI> 


31 


<DL> 


32 


<DT>type</DT> 


33 


<DD> disc : Rond plein (valeur par defaut)<BR> 


34 


square : Carre plein<BR> 


35 


circle : Cercle vide</DD> 


36 


</DL> 


37 


<LI>Element LK/LI> 


38 


<DL> 


39 


<DT>type</DT> 


40 


<DD> disc : Rond plein (valeur par defaut)<BR> 


41 


square : Carre plein<BR> 


42 


circle : Cercle vide</DD> 


4 3 


</DL> 


44 


</UL> 


45 


</0L> 





80 LE GUIDE COMPLET 



Listes 



Chapitre 4 



La figure suivante presente 1' aspect de ce code vu dans un navigateur. 



<£-h.--fe' 



zi '...■ ok | l;„ 



Arguments et valeurs 
possibles dans ties listes 



I Liste ordonnee 

■ Element OL 

start 



valeur de debut de la numerotaiion 
type 

1 , OriiQE' e s arabes (valem par defaut) 

a : Lettres minuscules 

A : Lettres majuscules 

I : Chiffres romains en minuscules 

I : Chiffres romains en majuscules 

■ Element LI 
value 

s/aleur de reinitialisation de la numerotation 
type 

1, Chiffres arabes (vaLem par' defaut) 
a : Lettres minuscules 
A : Lettres majuscules 
I : Chiffres romains en minuscules 
I : Chiffres romains en majuscules 
II. Liste a puces 

■ Element UL 
type 

disc : .Rond plein (valeur par defaut) 
square : Carre plein 
circle : Cercle vide 

■ Element LI 
type 

disc. : .Rond plein. (sale).*.)" par defaut) 
square : Carre plein 
circle : Cercle vide 



Figure 4. 7 ; 

Listes imbriquees 



Ce code presente plusieurs choses interessantes. Remarquez d'abord la 
presence de numeros de ligne : ceux-ci ne sont presents que pour 
faciliter 1' interpretation du code et ne doivent pas etre saisis. En 
revanche, le code a ete indente pour mettre en evidence les 
imbrications : les elements de meme rang apparaissent les uns en 
dessous des autres, tandis que les passages a la ligne HTML (<BR>) ont 
ete materialises a l'aide de retours chariot « manuels ». Comme cela a 
deja ete precise, les espaces vides supplementaires (espaces, tabulations, 
sauts de ligne) sont ignores par HTML : ils ne servent qu'a simplifier la 
lecture du code. C'est une bonne habitude a prendre lors de la saisie 
manuelle de code. La plupart des editeurs de code WYSIWYG 
accomplissent cela automatiquement. 

Examinez le code plus en detail : apres la ligne 1 (V element titre de 
premier niveau HI), il est debute en ligne 2 une liste ordonnee a l'aide 
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de 1' element OL, dont l'attribut type stipule que la numerotation est 
faite en chiffres romains majuscules (type="l")- 

Vient ensuite, ligne 3, un element de ligne LI, puis, ligne 4, debute une 
liste a puces, l'element UL possedant un attribut type fixe a square, 
pour definir une puce carree pleine. Vient ensuite un element de liste 
(Li), puis commence, ligne 6, une liste de definitions enumerant les 
attributs et les valeurs possibles pour cet element. 

II suffit ensuite de fermer la liste de definitions (ligne 15), de placer un 
autre element LI (pour l'element LI de liste ordonnee, ligne 16) et de 
recommencer une liste de definitions. Nous fermons ensuite la liste de 
definitions (ligne 26), la liste a puces (ligne 27) et arrivons au second 
membre de la liste ordonnee (ligne 28). La suite reprend la structure 
presentee a partir de la ligne 4. La derniere liste de definitions est fermee 
ligne 43, la liste a puces ligne 44 et enfin la liste numerotee ligne 45. 
Ouf. .. Trois types differents de listes imbriquees, tout en jouant a l'aide 
de l'attribut type sur l'aspect de ces listes... 

Cette structure demande la saisie d'une quantite de code importante. II 
est done interessant de voir en quoi le recours a un editeur HTML 
permet de faciliter les choses. 

Creation d'une liste imbriquee 
avec un editeur HTML 

Nous allons ici creer des listes imbriquees a l'aide de l'editeur gratuit du 
W3C, Amaya. 

1 Ouvrez Amaya (Demarrer > Tous les programmes > Amaya > 
Amaya). 

2 Creez un nouveau document en choisissant File > New > New 
XHTML 1.0 Transitional document. Par defaut, il est propose de 
creer le fichier dans le dossier d' installation d'Amaya : naviguez 
jusqu'a votre dossier Mon site Web, puis saisissez comme nom de 
document Listeslmbriquees2.html. 

3 Le document est de type XHTML 1.0. Transformez-le 
immediatement en document HTML en choisissant File > Change 
the Document Type > Change to HTML 4.01 Transitional. 
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Fichier Edition XHTML XML 


Liens Vues Style Attribute Annotations Signets Cooperation Aide 






Nouveau 

Ouvrir dans nouvwlls fsristre. 
Recharger le document 
Precedent 
Suivant 


Ctrl o Ctrl o 
. Ctrl o Ctrl w 
F5 

Ctrl b Ctrl b 
Ctrl b Ctrl F 


fem-&3smm*=nm 


^^*n 






- 














Sauver 

Sauver cornme. , . 

Synchroniser 


Ctrls 

Shift Ctrl 5 
Ctrl b Ctrl y 










Supprimer le doctype 
Ajouter un doctype 






Forcer un code caractere 

Informations sur le document 








Changer pour XHTML 1.1 
Change" pour X-TML 1.0 Transitional 
Changer pour XHTML l.D Strict 
Changer pour XHTML 1.0 Basic 






Parametrer et imprimer. , . 
Imprimer 


Ctrlp 
Shift Ctrl P 






Former la Fenetre 


Ctrl q 


Changer pour HTML 4.01 Strict 



























Figure 4.8 : 

Modification 
du type de 
document 
avec Amaya 



Remarquez que la barre de titre affiche no title. Modifiez le titre du 
document. Choisissez XHTML> Change title, puis saisissez 
Listes imbriquees. La barre de titre affiche Listes imbriquees. 

Creez un titre de niveau 1 : cliquez sur le bouton H1, puis 
saisissez Arguments et valeurs possibles dans des 

listes. 

Debutez une liste numerotee en cliquant sur le bouton Numbered 
list. 



Selectionnez la ligne numerotee 1, puis choisissez Edit > Insert. 
Une seconde ligne numerotee 2 apparait en dessous. Remarquez 
qu'avec Amaya, pour creer des listes imbriquees, mieux vaut 
definir la structure d'abord : nous creons les deux lignes de la 
premiere liste avant d'inserer les autres listes. 

8 Placez-vous juste apres 2, puis saisissez Liste a puces. 

9 Placez-vous juste apres 1, puis saisissez Liste ordonnee. 

10 Debutez une liste a puces en cliquant sur le bouton Bulleted list. 

11 Comme precedemment, cette liste a puces doit compter deux 
elements : selectionnez la premiere ligne, puis choisissez Edit > 
Insert. 

12 Placez-vous sur la premiere ligne, puis saisissez Element OL. 

1 3 Debutez une liste de definitions en cliquant sur le bouton 
Definition list, puis saisissez start. 

14 Choisissez XHTML > List > Definition (dd), puis saisissez valeur 
de debut de la numerotation. 

15 Choisissez XHTML > List > Term (dt), puis saisissez type. 
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IB Choisissez XHTML > List > Definition (dd). 

17 Saisissez 1 : Chiffres arabes (valeur par defaut), 
puis choisissez XHTML > Break (br). 

18 Repetez l'etape 13, en saisissant successivement a : Lettres 
minuscules, A : Lettres majuscules et i : Chiffres 
romains en minuscules en inserant apres a chaque fois un 
saut de ligne. 

19 Saisissez I : Chiffres romains en majuscules. 



Chaines de texte 

Vous pouvez egalement saisir a la suite toutes les chaines de texte, 
puis vous placer a la fin de chacune et inserer le saut de ligne en 
choisissant XHTML > Break (br). 



20 Placez-vous sur le deuxieme element de la liste a puces et 

saisissez Element LI. 

21 Debutez une liste de definitions en cliquant sur le bouton 
Definition list, puis saisissez value. 

22 Choisissez XHTML > List > Definition (dd), puis saisissez valeur 
de reinitialisation. 

23 Repetez les etapes 15 a 19. 

24 Placez-vous apres Liste a puces, puis debutez une nouvelle liste a 
puces en cliquant sur le bouton Bulleted list. 

25 Cette liste a puces doit egalement compter deux elements : 
selectionnez la premiere ligne, puis choisissez Edit > Insert. 

26 Placez-vous sur la premiere ligne, puis saisissez Element UL. 

27 Debutez une liste de definitions en cliquant sur le bouton 
Definition list, puis saisissez type. 

28 Choisissez XHTML > List > Definition (dd). 

29 Saisissez disc : Rond plein (valeur par defaut), puis 
choisissez XHTML > Break (br). 

30 Repetez l'etape 29, en saisissant square : Carre plein, en 
inserant un saut de ligne, puis en saisissant circle : Cercle 

vide. 

31 Placez-vous sur la seconde ligne, puis saisissez Element LI. 

32 Repetez les etapes 27 a 30. 
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La fenetre de l'editeur affiche directement les listes imbriquees telles 
que vous les aviez vues precedemment. 



FttHr tdtocr. 'ih. .*>; Vims '. 



[ITdTnT. 



Arguments et valeurs' possibles drnis. ries listes 
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Figure 4.9 : 

Page Listes imbriquees dans l'editeur 
Amaya 



Aucune balise n'a ete saisie « en dur ». Mais quel est 1' aspect du code 
sous-jacent ? Pour le voir, choisissez View > Show source. Un extrait de 
ce code est presente dans le listing suivant. 
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SCO 
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Figure 4. 10 : 

Code source de la page 
Listes imbriquees 



Remarquez la presence de numeros de lignes (servant a faciliter 
T identification des erreurs), 1' instruction Idoctype et 1' element meta 
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qui concerne le generateur, automatiquement inseres. Bien que nous 
ayons choisi de convertir le document en HTML 4.01, les balises 
figurent en minuscules, conformement a la specification XHTML 1.0. 
Le code est agreablement indente et agremente de couleurs pour mieux 
identifier les elements et leurs attributs. Remarquez en outre la presence 
de caracteres « curieux », a la place des caracteres accentues (par 
exemple, ordonnee est code ordonné e). Nous reviendrons 
bientot sur ce point. 

Listing 4-2 : Extrait du code du fichier Iistesimbriquees2.html 

1 <hl>Arguments et valeurs possibles dans des listes</hl> 

2 <ol> 

3 <li>Liste ordonnée 

4 <ul> 

5 <li>Elément OL 

6 <dl> 

7 <dt>start</dt> 

8 <dd>valeur de début de la numS#xe9; rotation</dd> 

9 <dt>type</dt> 

10 <dd>l,Chiffres arabes (valeur par ds#xe9; faut) <br> 

11 a : Lettres minuscules<br> 

12 A : Lettres majuscules<br> 

13 I : Chiffres romains en minuscules<br> 

14 I : Chiffres romains en majuscules .</dd> 

15 </dl> 

16 </li> 

17 <li>Elément LI 

18 <dl> 

19 <dt>value</dt> 

20 <dd>valeur de ré initialisation de la 
S"= numé rotation. </dd> 

21 <dt>type</dt> 

22 <dd>l, Chiffres arabes (valeur par dstxe9;faut)<br> 

23 a 

24 A 

25 I 

26 I 

27 </dd> 

28 </dl> 

29 </li> 

30 </ul> 

31 </li> 

32 <li>Liste &#xeO; puces 

33 <ul> 

34 <li>Elément UL 

35 <dl> 

36 <dt>type</dt> 

37 <dd>disc : Rond plein (valeur par ds#xe9; faut)<br> 

38 square : Carré plein<br> 

39 circle : Cercle vide </dd> 
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40 




</dl> 


41 




</li> 


42 




<li>Elément 


4 3 




<dl> 


44 




<dt>type</dt> 


45 




<dd>disc : F 


46 




square : 


47 




circle : 


48 




</dd> 


49 




</dl> 


50 




</li> 


51 


< 


/ul> 


52 


</l 


L> 


53 


</ol> 





l: 



Rond plein (valeur par dé faut)<br> 
Carré plein<br> 
Cercle vide 



L'extrait concernant uniquement les listes est un peu plus long : les 
balises de fermeture </li> occupent une ligne a elles seules, 
contrairement au listing precedent. Remarquez en outre que les listes 
sont reellement imbriquees dans les elements LI concernes : en termes 
de structure, cette construction est bien plus propre. Pour vous en 
persuader, examinez la structure du document en choisissant View > 
Show structure. 
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Figure 4.77 ; 

Structure de la page Listes 
imbriquees 
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Est-il reellement plus simple de travailler avec un editeur dedie que 
directement avec le Bloc-Notes ? Pour le moment, cela n'est pas 
probant, mais reconnaissons que cet exemple est particulierement 
« tordu » ! 

Les listes sont largement employees dans les pages Web. Pour vous en 
persuader, examinez la page de la version francaise de la specification 
HTML 4.01 et le code source correspondant. 
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Figure 4. 12 : Exemple de listes 

Vous y voyez des listes a puces et numerotees imbriquees, employees 
pour creer une table des matieres. 





I 








Fichier Edition Affichage 




<li><a 


class = "tDC>:ref lr href ="apj .:ies . html" rel= "chapter ">Chanciemerits-c/ :></li> * 




<liKa class = "tocxref: " href ="appendix/notes . html" rel= ■ : ^\.::-: • ■ jRemarques sue les performances, 
<ul class="toc"> 




<li><d 


class- "tocxref" href ="ref erences . html" reJ.= "chsi ■ ;• References^ aX/±i> 




<liXa 


class-"tocnref " href = "index/elenients . html" rel-" .. :''> Index de^ elements-;/ :></.'. > 




<liXa 


class- "tocxref" href = " index/ attributes . html" rel- "chapter "> Index des attr ikiuts</a></JLi> 




<liXa 


class= "tocxref " href =" index/ list . html" rel= "chapter ">Index</aX/li> 




</ul> 
</div> 

<! — NeirPag-e — X.' — this Is foz htznlSps — > 




<h2Xa 


nun..-- i -ii- i- i- - ■. ii.* 




<ol> 






<liXa 


class="tocxref " href ="about . html" rel="chapter ">& propos de la sp£ cificatii 




<ol> 






<lixa 


class="tocxref " href ="about . html#h- 1 . 1">L ' organisation de la spseacute; cif icat ion</ax/l: 




<liKa 


class= "tocxref" href = "about . httnl#h- 1 . 2 ">Les conventions du document-;/ 3> 




<o±> 






<lixa 


class="tocxref " href ="about . httiil#h-1.2 . l' r >Le-3 ieacute; lieacute.-rrietits et les attributs</a: 




<lixa 
</ol> 


class= "tocxref " href = "about . httiil#h-1.2 .2 ">Les cemarques et les exeraples</ax/li> 




<liXa 


class= "tocxref " href = "about . htmlSh- 1 . 3 ">Bemerciements-;/a> 




<ol> 






<lixa 


class = "tocxref ' href = "about . html#h- 1 . 3 . l">Remerciertients pour la pr seacute; sente rseacute . 




<i 



Figure 4. 13 : Exemple de listes avec le code source correspondant 
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Les tableaux (souvent nommes « tables » en HTML) permettent de 
presenter des donnees (texte, texte preformate, images, liens, 
formulaires, champs de formulaires, autres tables, etc.) organisees en 
lignes et en colonnes. lis constituent desormais la methode favorite 
d'affichage de donnees et de presentation des pages Web. Alors qu'ils 
etaient initialement prevus pour les seules donnees, ils ont rapidement 
conquis le statut d'outils de presentation, autorisant les auteurs a 
concevoir des pages ressemblant a des documents imprimes, dotees de 
barres laterales, de colonnes et d'espaces vierges. 

Les tableaux ne devraient pas toutefois representer simplement un 
moyen de disposer le contenu d'un document : cela peut entrainer des 
problemes de restitution sur les medias non visuels. En outre, employes 
avec des images, ces tableaux peuvent forcer l'utilisateur a effectuer un 
defilement horizontal pour voir un tableau concu sur un systeme offrant 
une surface d'affichage de taille superieure. Afm de minimiser ces 
problemes, il est recommande d'employer des feuilles de style pour le 
controle de la disposition plutot que des tableaux. 

Les cellules d'un tableau peuvent contenir soit des informations « de 
rubrique » (element TH), soit des informations « de donnees » (element 
TD). Les cellules peuvent occuper plusieurs lignes et colonnes. Le 
modele du tableau HTML 4 permet aux auteurs l'etiquetage de chaque 
cellule, de sorte que les agents utilisateurs non visuels peuvent 
communiquer plus facilement a l'utilisateur les indications de rubrique 
concernant la cellule. Ce mecanisme apporte non seulement une grande 
assistance aux personnes qui ont des deficiences visuelles, mais donne 
aussi aux navigateurs sans fil multimodes, avec des capacites d'affichage 
limitees (par exemple, les teleavertisseurs et les telephones utilisant le 
Web), la possibilite de gerer les tableaux. 

Contrairement a ce qui a pu se passer au debut, la plupart des 
navigateurs prennent desormais parfaitement en charge les tableaux 
(meme si certains interpreters texte -parole peuvent encore eprouver 
quelques difficultes a les comprendre). Compte tenu de leur facilite de 
mise en oeuvre, il serait dommage de se priver de ces precieux outils. 
Attention toutefois, si leur mise en oeuvre initiale est tres simple, leur 
puissance permet d'atteindre un degre de sophistication eleve assorti 
d'une rare complexite ! 
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C'est probablement pour les tableaux que le recours a un editeur HTML 
dedie est le plus precieux, comme nous le verrons vers la fin du chapitre. 
Mais, comme nous l'avons deja dit en d'autres cas, la meilleure facon de 
bien les comprendre consiste a en creer d'abord quelques-uns de toutes 
pieces a l'aide d'un simple editeur de texte : ce a quoi nous allons nous 
attacher maintenant. 



Creation d'un tableau simple 

La structure fondamentale d'un tableau est constitute de 1' element 
parent TABLE. Celui-ci contient tous les autres elements qui specifient la 
legende, les rangees, le contenu et la mise en forme. Ses principaux 
elements enfants sont TR (ligne) et TD (cellule d'une ligne, assimilable a 
une colonne). 

Nous allons commencer par placer sur la page Ma famille du site un 
tableau tres simple, qui a pour but de presenter une famille pour le 
moment reduite aux deux parents (nous avons bien le temps d' avoir des 
enfants !). 

1 Ouvrez le Bloc-Notes s'il ne Test pas deja, puis le fichier 
famille.html cree au cours du chapitre precedent. 

2 Comme d'habitude, modifiez le numero de version : 

<META name="version" content="l . 4 . 1"> 

3 Supprimez la ligne du titre de niveau 2 (H2), puis placez-vous 
apres la balise <P> et remplacez le contenu actuel par : 
<P>Presentation de ma famille</P> 

4 Placez-vous apres la balise </P> et appuyez sur [Tjj] pour creer 
une nouvelle ligne. Sur cette ligne, saisissez <TABLE>. Comme 
conseille habituellement, fermez immediatement l'element en 
appuyant sur {^} et en saisissant la balise fermante du tableau, 

</TABLE>. 

L'astuce avec les tableaux HTML consiste a reflechir en termes 
de lignes, et non de colonnes, contrairement a ce qui est 
generalement pratique dans un tableau de feuille de calcul ou de 
traitement de texte. 

5 Placez-vous apres la balise ouvrante <TABLE>, appuyez sur [T^] , 
ouvrez un element ligne avec <TR>, appuyez sur {^} et fermez 
l'element par </TR>. 
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6 Placez-vous apres la balise ouvrante <TR>, appuyez sur [*^\ , 
ouvrez un element colonne avec <TD>, saisissez Qualite, fermez 
l'element par </TD>, puis appuyez sur [i^] . 

7 Saisissez <TD>Prenom</TD>, puis appuyez sur (T^ . 

8 Saisissez <TD>Age</TD>, puis appuyez sur (T^) . 

9 Saisissez <TD>Taille</TD>, puis appuyez sur [T^ . 

10 Placez-vous apres la balise fermante </TR>, appuyez sur f^] , puis 
ouvrez un nouvel element ligne avec <TD>. <TR>, appuyez sur (Tjj] 
et fermez l'element par </TR>. 

11 Placez-vous apres la balise ouvrante <TR>, appuyez sur [T^) , 
saisissez <TD>Pere</TD>, puis appuyez sur [i^] . 

12 Saisissez <TD>Jean</TD>, puis appuyez sur [i^] . 

13 Saisissez <TD>30</TD>, puis appuyez sur [*^\ . 

14 Saisissez <TD>1, 83</TD>, puis appuyez sur («3 

15 Placez-vous apres la balise fermante </TR>, appuyez sur [*^j puis 
ouvrez un nouvel element ligne avec <TR>, appuyez sur [+jj] et 
fermez l'element par </TR>. 

1 6 Placez-vous apres la balise ouvrante <TR>, appuyez sur [*^\ , 
saisissez <TD>Mere</TD>, puis appuyez sur (T^ . 

17 Saisissez <TD>Martine</TD>, puis appuyez sur (Tjjj. 

18 Saisissez <TD>2 8</TD>, puis appuyez sur (T^ . 

19 Saisissez <TD>1, 63</TD>, puis appuyez sur («3 

20 Nous agrandirons la famille plus tard. Enregistrez votre fichier 
sans modifier son nom (nous ne souhaitons pas de nouvelle erreur 
de lien !). Ne fermez ni le fichier ni le Bloc-Notes. 



p^" U3 m za w ,JI - im. 



Ma famille 



Presentation de ma famille 

QuaJiSe Prenom Age Tailk 
Pere Jean 30 1,83 
Mere Martine 28 1,63 



Retour vers la page d'accueil 



Figure 4. 14 : 

Aspect d'un tableau simple 
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Examinez cette page dans votre navigateur. Vous pouvez le faire en 
chargeant la page d'accueil et en suivant le lien vers Ma famille, ou en 
chargeant directement la page famille.html. Ce tableau reste d'une 
extreme simplicite. 

Voici le code complet de cette page. 
Listing 4-3 : Code de la page famille.html (version 1 .4.1 ) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 

<HTML> 

<HEAD> 

<TITLE>"Ma famille"</TITLE> 

<META name="author" content="mon nom"> 

<META name ="version" content="l . 4 . 1"> 

</HEAD> 

<BODY> 

<H1 align="center">Ma famille</Hl> 

<P>Presentation de ma famille</P> 

<TABLE> 

<TR> 

<TD>Qualite</TD> 

<TD>Prenom</TD> 

<TD>Age</TD> 

<TD>Taille</TD> 

</TR> 

<TR> 

<TD>Pere</TD> 

<TD>Jean</TD> 

<TD>30</TD> 

<TD>1, 83</TD> 

</TR> 

<TR> 

<TD>Mere</TD> 

<TD>Martine</TD> 

<TD>2 8</TD> 

<TD>1, 63</TD> 

</TR> 

</TABLE> 

<P align="center"> 

<A href="mailto : votre_nom@votre_FAI">Ecrivez-moi !</A>. 

</P> 

<P align="center"> 

<A href="pageaccl_4_l . html">Retour vers la page d' accueil</A> 

</P> 

</BODY> 

</HTML> 



92 LE GUIDE COMPLET 



Tableaux 



Les balises fermantes des elements TR et TD peuvent etre omises, mais 
cela est deconseille, ne serait-ce que par souci de compatibilite avec 
XHTML 1.0. 



En-tete de colonne : element TH 

C'est un tableau tres simple, de trois lignes et quatre colonnes. 
Comment l'ameliorer ? Tout d'abord, il serait mieux de mettre en 
evidence les en-tetes des colonnes. Cela ne pose aucun probleme, grace 
a un element prevu a cet effet, TH. 

Placez-vous apres l'ouverture du premier element ligne (tr) et 
remplacez tous les noms d'element TD par TH, comme dans : 

<TH>Qualite</TH> 

La balise fermante de l'element TH peut etre omise, mais cela reste 
deconseille. 



Les elements TH 

REMAROUE T .,. . , . 

Les agents utihsateurs visuels restituent typiquement le contenu des 
elements TH centre verticalement et horizontalement, et en caracteres 
gras. 



Legende de tableau : element CAPTION 

II serait egalement interessant de doter le tableau d'une legende, plutot 
que d' avoir recours a un element P qui « casse » un peu la structure de 
la page. Tel est le but de l'element CAPTION. 

1 Supprimez la ligne <P>Presentation de ma famille</P>. 

2 Placez-vous apres l'ouverture de l'element tableau (TR), appuyez 
sur («3 et saisissez : 

<CAPTION>Presentation de la famille</CAPTION> 

L'element CAPTION fournit une breve description du but du tableau. II 
doit imperativement etre unique et situe immediatement apres la balise 
ouvrante de l'element TABLE. Vous pouvez egalement fournir une 
description plus longue, grace a l'attribut summary de l'element TABLE, 
au benefice des personnes employant des agents utilisateurs de type 
convertisseur texte-parole ou generation de braille. Nous reviendrons sur 
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cet attribut, ainsi que sur les autres attributs applicables aux elements 
enfants d'un tableau et qui permettent d'ameliorer son rendu pour les 
agents utilisateurs non visuels dans le Chapitre 10, traitant de 
1' accessibilite. Servez-vous cependant tout de suite de 1' attribut 

summary : 

3 Placez-vous dans la balise d'ouverture de l'element TABLE et 
saisissez : 

<TABLE summary="Ce tableau presente les membres de ma 
famille en donnant leur titre, leur prenom, leur age 
et leur taille"> 

Cet element est particulierement important pour les tableaux depourvus 
de legende (CAPTION). 

Controle de I'alignement d'un tableau 

Vous avez deja rencontre l'attribut align, disponible pour a peu pres 
tous les elements bloc. TABLE etant un element bloc, en employant 
align="center" dans cet element, vous centrez le tableau dans la 
page. Les valeurs possibles pour align sont center, left ou right. 

1 Modiflez la ligne de la balise d'ouverture de l'element TABLE 
pour centrer le tableau : 

<TABLE align=" center" summary="Ce tableau presente 
les membres de ma famille en donnant leur titre, 
leur prenom, leur age et leur taille"> 

2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le 
fichier ni le Bloc-Notes. 

Examinez cette page dans votre navigateur. Le tableau est plus 
interessant. 



<J-K> ■& '.a 1 m i u d ffl°K | Ll 



Ma famille 

Presentation de rna famille 
Qunlite Prenom Age laille 

Pere Jean 30 1,83 
Mere Martine 28 1,63 

Ecrivez-rnoi ! . 

■ 



Figure 4. 75 ; 

Aspect du tableau centre 
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Vous pouvez egalement employer cet attribut dans une ligne, pour ne 
centrer que les contenus des cellules de cette ligne, ou dans n'importe 
laquelle des cellules individuelles, pour ne centrer que les donnees de 
cette cellule. Souvenez-vous cependant que 1'emploi de 1' attribut align 
est desormais est desormais deconseille : mieux vaut recourir aux 
feuilles de style. 

Bordures et regies de tableau : attributs 
border, frame et rules 

Un tableau digne de ce nom possede generalement des lignes de 
separation. Vous pouvez controler celles-ci a l'aide de plusieurs attributs 
facultatifs de l'element TABLE : border, frame et rules. 

Commencons par l'attribut border, dont la valeur exprimee en pixels 
definit la largeur du cadre exterieur. 

1 Modifiez comme suit la ligne de la balise d'ouverture de 
l'element TABLE : 

<TABLE border="2" align="center " summary="Ce tableau 
presente les membres de ma famille en donnant leur 
titre, leur prenom, leur age et leur taille"> 

2 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le 
fichier ni le Bloc-Notes. 

Examinez le tableau dans un navigateur : son aspect est nettement plus 
sympathique. 
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Ma famille 

Presentation de ma famille 




Qunlite Frenoin Age Tviille 

|Pere |jean 30 1,S3 




|Mere |Martine 28 1,63 


Ecrivez-moi !. 

Retour vers la page d'accueil 


- 



Figure 4. 16 : 

Aspect du tableau ameliore 

Vous pouvez cependant aller bien plus loin, en specifiant quels cotes du 
cadre entourant la table doivent etre visibles (grace a l'attribut frame), 
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ainsi que les regies devant etre affichees (grace a l'attribut rules). Les 
valeurs possibles pour ces deux attributs sont presentees dans le 
tableau de la page 5. Modifiez votre tableau pour afficher une bordure de 
5 pixels a gauche et a droite du tableau, des regies etant dessinees 
uniquement entre les colonnes : 

3 Modifiez comme suit la ligne de la balise d'ouverture de 
1' element TABLE : 

<TABLE border="5" f rame="vsides" rules="cols" align="center" 
summary="Ce tableau presente les membres de ma famille en 
donnant leur titre, leur prenom, leur age et leur taille"> 

4 Enregistrez votre fichier, sans modifier son nom. Ne fermez ni le 
fichier ni le Bloc-Notes. 

Examinez le resultat obtenu dans un navigateur : son aspect devrait 
ressembler a ce qui est presente dans la figure suivante.. 
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Ma famille 






Presentation de ma famille 






Qujilite 


Plenum 


Aae 


Tamp 








Pere 


Jean 


30 


1,83 








Mere 


Martine 


28 


1,63 








z-ifioi !. 






Retour vers la page d'accuell 





Figure 4.17 : 

Aspect du nouveau tableau avec 
Firefox 



Le tableau suivant presente les valeurs possibles des attributs frame, 
rules et border ainsi que leur signification. 



Tableau 4.2 : Attributs de bordure et de regies de /'element TABLE 


Attribut 


Valeur 


Signification 


Frame 


Void 


Aucune bordure [valeur par defaut] 




Above 


Haut uniquement 




Below 


Bas uniquement 




Hsides 


Haut et bas uniquement 




Vsides 


Droite et gauche uniquement 




Lhs 


Cote gauche uniquement 
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Tableau 4.2 : 


Attributs de bordure et de regies de /'element TABLE 


Attribut Valeur 




Signification 


Rhs 




Cote droit uniquement 


box ou border 


Les quatre cotes 


Rules None 




Aucune (valeur par defaut] 

Uniquement entre les groupes de lignes 
[thead, tfoot et tbody] et les groupes de 
colonnes [COLGROUP et COL] 


Group 


3 


Rows 




Uniquement entre les lignes 


Cols 




Uniquement entre les colonnes 


All 




Entre toutes les lignes et colonnes 


Border N 




Bordure de n pixels. Pas de bordure si n = 0. 



Pour des raisons de compatibilite descendante, les conventions suivantes 
doivent etre respectees par les agents utilisateurs : 

La definition border="0" signifie que f rame="void" et que 
rules="none" (sauf si specifie autrement). 

Toute autre valeur de l'attribut border signifie inversement que 

f rame="border" et que rules="all". 

La presence de l'attribut border sans valeur dans la balise 
ouvrante de l'element TABLE equivaut a f rame="border" et a 
rules="all", avec une certaine valeur par defaut non nulle pour 
l'attribut border. 

Autrement dit, les definitions <TABLE border="2"> et <TABLE 
border="2" f rame="border " rules="all"> sont 

equivalentes, comme <TABLE border> et <TABLE 
f rame="border " rules="all">. 



ATUKIION 



Variations selon les navigateurs 

Le rendu d'un tableau peut differer legerement selon le navigateur 
employe. Examinez les copies d'ecran suivantes, correspondant a l'etat 
actuel de notre page famille vue sous Internet Explorer 
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A 



}««**. -I^J-l^ [3] 



e '■. G:\HTMUMon5iteHtfsrnillel_4_ld.html _lJ ^_J ° 



Ma famille 

Presentation de ma famille 

Quality Pienom Age Taille I 

Pere Jean 30 1,83 I 

Mere Martirie'28 1,63 | 

Ecriirez-nioi ! . 

.■:..-. ■ : : 



Figure 4. 18 : 

Aspects du nouveau tableau avec 
Internet Explorer 



et Amaya, 



:ion XHTML § Lier 



Style Attribute 



9 v<# .>fl|H B r A\E S ClafllH2£Si 

Dwrir |G:\HTML\Mon Site\4\famille1_4_1 dhtml ^] 



Ma famille 

Present- ton de ma ramilie 



0'i.ihiij 


Pienom 


As? 


Tnffle 


Pere 


Jean 


30 


1,83 


Mere 


Mariuj.e 


2S 


1,63 



Ectivgz-moi ! 
Retour vers la page d'accusl 



Figure 4.19 : 

Aspects du nouveau tableau avec Amaya 



et comparez-les a la celle obtenue avec Firefox precedemment obtenu. 

Si Firefox et Internet Explorer sont tres proches (l'intervalle entre le titre 
et le tableau est plus faible avec Firefox, tandis que l'effet « relief » est 
plus prononce), Amaya affiche une unique ligne de separation. 



Controle de la taille et de la structure 
des cellules 

Reprenons un peu de terminologie : un tableau est compose de lignes 
(elements tr) et de colonnes. L' intersection d'une ligne et d'une 
colonne est une cellule, le plus petit element de donnees d'un tableau. 
Une cellule individuelle ne devrait contenir qu'une information 
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(toujours la structure avant tout !), de type en-tete (element th) ou 
donnee (element td). Dans ce qui precede, vous avez construit votre 
premier tableau, compose de trois lignes (dont la ligne d'en-tetes) et de 
quatre colonnes, soit un total de douze cellules individuelles : le tableau 
contient effectivement trois elements ligne TR et douze elements cellule, 
dont quatre elements TH d'en-tete et huit elements TD de donnees. 

Une cellule peut recevoir une mise en forme particuliere en HTML a 
l'aide d'attributs speciaux. 

Espacement : attributs cellspacing 
et cellpadding 

II est ainsi possible de modifier l'espacement entre les cellules, tout 
comme le decalage entre le contenu de la cellule et la bordure, ce qui 
porte le nom un peu inattendu de « remplissage » (padding). Pour ce 
faire, vous modifiez les attributs cellspacing et/ou cellpadding. 

L'attribut cellspacing determine la largeur de la partie blanche de la 
bordure. Autrement dit, il quantifie l'espace qui doit etre laisse par 
F agent utilisateur entre le cote gauche du tableau et le cote gauche de la 
colonne situee a l'extreme gauche, le haut du tableau et le haut de la 
rangee superieure, et ainsi de suite pour le cote droit et le bas du tableau. 
L'attribut specifie egalement l'espacement entre les cellules. 

Notre tableau etant de tres petite faille, vous allez l'aerer un peu. 

1 Modifiez comme suit la ligne de la balise d'ouverture de 
l'element TABLE : 

<TABLE border="5" f rame="vsides" rules="cols" align="center" 
cellspacing="20" summary="Ce tableau presente les membres 
de ma famille en donnant leur titre, leur prenom, leur age 
et leur taille"> 

2 Enregistrez votre fichier, sans modifier son nom, puis examinez le 
resultat dans votre navigateur (voir Figure 4.20). 

A moins que cela ne ressemble a une des figures qui suivent (voir 
Figure 4.21, 4.22). 
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Ma famille 



Presentation de ma famiHe 



IQualite 
Pere 
Mere 



Frenoin Age 



Jean 

Martin e 



Taffle 

1,83 
1,63 



Ecnvez-moi ! . 

::■.'.■.' ... . : . ■ ■ ■.■;■. ...... 



- 



Figure 4.20 : 

Emploi de I'attribut cellspacing, vu 
dans Firefox. 





Qualite 


Plenum 


Age 


Taffle 






Pert 


Jean 


30 


1,83 






Mere 


Martine 


28 


1.63 





Figure 4.21 : 

Emploi de I'attribut cellspacing, vu dans 
Internet Explorer 











|Qua]ile| |preiioin| |Age| | Taffle | 






|Pere | |jean | |j0 | 1 1.S3 | 






|lvlere | |lvkrtine | 1 28 | 1 1,63 | 





Figure 4.22 : 

Emploi de I'attribut cellspacing, vu 
dans Amaya. 

Les differences entre navigateurs sont ici encore plus flagrantes : Firefox 
semble incapable de tenir compte de la presence de I'attribut 
cellspacing, contrairement a ses homologues. Plus vous compliquez 
la presentation d'un tableau en combinant les attributs et plus cela est 
susceptible de se produire. 

3 Modifiez a nouveau la ligne de la balise d'ouverture de l'element 

TABLE : 

<TABLE border="2" align="center" cellspacing="20" summary= 
"Ce tableau presente les membres de ma famille en dormant 
leur titre, leur prenom, leur age et leur taille"> 

L' aspect dans les trois navigateurs, bien qu' encore different, est plus 
satisfaisant. 
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Age 
|2F 


i«me| 


Qualite 


Prenoin 


Pere 


Jean 






Mere 


Martine 



Figure 4.23 : 

Page modifiee avec attribut 
cellspacing, vu dans Firefox 




Figure 4.24 : 

Page modifiee avec attribut 
cellspacing, vu dans Internet Explorer 



1 


















|Tnme| 

[mF] 






| Qualite | 


| Prelum | | Age | 




|Pere | 


|jean | 1 30 | 








JMere | 


| Martine | | 23 | 





















Figure 4.25 : 

Page modifiee avec attribut cellspacing, 
vu dans Amaya. 



Un second attribut, cellpadding, correspond a la largeur, egalement 
exprimee en pixels, de l'espace compris entre le contenu de la cellule et 
la bordure du tableau ou la regie. La valeur de cet attribut peut etre 
exprimee en pixels : les quatre marges se trouvent alors a cette distance 
du contenu. Si la valeur de 1' attribut est exprimee en pourcentage, les 
marges superieure et inferieure devraient se trouver a egale distance du 
contenu, en fonction d'un pourcentage de l'espacement vertical 
disponible, tandis que les marges gauche et droite devraient se trouver a 
egale distance du contenu, en fonction d'un pourcentage de 
l'espacement horizontal disponible. 

Ces deux attributs controlent done conjointement l'espacement entre et a 
l'interieur des cellules. 



9* 



Bordure invisible 

En attribuant au tableau une bordure invisible (border=0), le contenu 
de la cellule semble « Hotter », separe de toutes les autres informations. 
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C'est souvent interessant, puisque HTML reste globalement peu 
adapte aux espaces blancs. 



1 Modifiez comme suit la ligne de la balise d'ouverture de 
1' element TABLE : 

<TABLE border="2" align="center" cellspacing="20" 
cellpadding="30%" summary="Ce tableau presente les membres 
de ma famille en donnant leur titre, leur prenom, leur 
age et leur taille"> 

2 Enregistrez votre fichier, sans modifier son nom, puis examinez le 
resultat dans votre navigateur. Vous devriez voir quelque chose 
d'equivalent a ce qui est presente dans la figure suivante. 



Presentation de ma famille 













Qualite 




Prenom 


Age 


Tallin 












Pere 




Jean 


30 


1,83 












Mere 




Martine 


28 


1,63 











Figure 4.26 

Emploi de 

I'attribut 

cellpadding 



Ici, I'attribut cellspacing specifie que les cellules devraient etre 
separees de vingt pixels, les unes par rapport aux autres ainsi que par 
rapport au cadre du tableau. L'attribut cellpadding stipule que la 
marge superieure et la marge inferieure de la cellule seront chacune 
separees du contenu de la cellule de 15 % de l'espacement vertical 
disponible (soit 30 % au total). De meme, la marge de gauche et la 
marge de droite de la cellule seront chacune separees du contenu de la 
cellule de 15 % de l'espacement horizontal disponible (soit 30 % au 
total). 

Alignement : attributs align et valign 

Vous pouvez egalement modifier 1' alignement d'une cellule. Pour 
modifier l'alignement horizontal, vous recourez a I'attribut align, deja 
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rencontre, dans un element TD ou TH. L'alignement vertical s'ajuste a 
l'aide de l'attribut valign. valign, qui peut prendre les valeurs top 
(haut), bottom (bas), middle (milieu, la valeur par defaut) et 
baseline (premiere ligne). Cette derniere valeur aligne le contenu de 
toutes les cellules selon la premiere ligne de texte, mais pas forcement 
en haut ni en alignant la derniere ligne. 

1 Modifiez comme suit les elements TD du second element TR (le 
premier contenant les en-tetes, soit des elements TH) : 

<TD valign="top">Pere</TD> 

<TD valign="top">Jean</TD> 

<TD align="right" valign="top">30</TD> 

<TD align="right" valign="top">l, 83</TD> 

2 Procedez de meme pour les elements TD du dernier element TR : 

<TD valign="top">Mere</TD> 

<TD valign="top">Martine</TD> 

<TD align="right" valign="top">28</TD> 

<TD align="right" valign="top">l, 63</TD> 

3 Enregistrez votre fichier, sans modifier son nom, puis examinez le 
resultat dans votre navigateur. 
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Ecnvez-moi !. 
Retourvers lapase d'accueil 







Figure 4.27 : 

Controle de 
l'alignement: 
horizontal et 
vertical 
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Attributs deconseilles en HTML 

REMARQUE 

Vous ne devriez pas etre etonnes que je signale une fois encore que 
les attributs align et valign sont a deconseiller dans le corps de la 
page HTML, et qu'une feuille de style devrait etre employee a la 
place... 



Largeur des colonnes : attribut width 

La largeur des colonnes peut etre specifiee a l'aide de 1' argument width 
de trois facons differentes : 

Fixe : une largeur fixe est exprimee en pixels (par exemple, 
width="30")- Specifier une largeur fixe permet une restitution 
progressive. 



A 



Conflit d'attributs 

Lorsqu'un tableau ou une colonne possede une largeur fixe, les 
attributs cellspacing et cellpadding peuvent necessiter plus 
d'espace que celui qui est attribue. En cas de conflit, les agents 
utilisateurs peuvent (sans etre obliges de le faire) donner a ces attributs 
la priorite sur l'attribut de largeur width. Mieux vaut done eviter de se 
trouver dans cette situation. 



Pourcentage : une largeur exprimee en pourcentage (par 
exemple, width="20%") se fonde sur le pourcentage d'espace 
horizontal disponible pour le tableau (entre les marges courantes 
gauche et droite). Remarquez que cet espace ne depend pas du 
tableau en lui-meme : une specification en pourcentage permet 
done une restitution progressive. 

Proportionnelle : une valeur proportionnelle (par exemple, 
width="3*") se rapporte aux portions d'espace horizontal 
necessaire au tableau. Si le tableau possede une largeur fixe (via 
l'attribut width de l'element TABLE), les agents utilisateurs 
peuvent le restituer de facon progressive, comme pour des 
colonnes proportionnelles. En revanche, si la largeur du tableau 
n'est pas fixe, 1' agent utilisateur doit attendre d' avoir recu toutes 
les donnees avant de pouvoir determiner l'espace horizontal 
necessaire au tableau. Cet espace sera alors seulement alloue aux 
colonnes proportionnelles. 
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Comme cela a ete mentionne, l'attribut width peut egalement etre 
employe sur l'element TABLE pour definir la largeur totale d'un tableau. 
Comme pour une colonne, cette largeur peut etre exprimee de facon 
fixe, en pourcentage ou de facon proportionnelle. 

Modifiez de nouveau votre tableau : 

1 Modifiez comme suit la ligne de la balise d'ouverture de 
l'element TABLE, pour creer un tableau occupant 80 % de 
l'espace libre disponible a l'ecran : 

<TABLE border="2" align="center" cellspacing="20" 
cellpadding="30%" width="80%" summary="Ce tableau 
presente les membres de ma famille en donnant leur 
titre, leur prenom, leur age et leur taille"> 

2 Modifiez comme suit les elements TH du premier element TR 
(celui qui contient les en-tetes) : 

<TH width="30%">Qualite</TH> 
<TH width="30%">Prenom</TH> 
<TH width="20%">Age</TH> 
<TH width="20%">Taille</TH> 

Remarquez que le total des quatre pourcentages est bien egal a 
100 %. 

3 Enregistrez votre fichier, sans modifier son nom, puis examinez le 
resultat dans votre navigateur. 
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Figure 4.28 : 

Ajustement de la 
largeur du tableau 
et des cellules 
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Cette figure merite que vous vous y attardiez un peu plus longtemps. 
Tout d'abord, remarquez que la valeur par defaut de l'attribut 
d'alignement horizontal align est « centre » (align="center") pour 
un element TH, alors qu'il est «a gauche » (align="left") pour un 
element td. En outre, les choix d'alignement sont bien mieux mis en 
evidence que precedemment. Remarquez egalement qu'il a suffi de 
modifier la largeur des cellules de la premiere ligne : ces specifications 
ont ete heritees par les lignes suivantes. 

Mais que se passerait-il si vous specifiez des largeurs differentes pour 
les cellules de la seconde ligne ? Autant essayer. . . 

4 Modifiez comme suit les elements TD du second element TR (le 
premier contenant les en-tetes, soit des elements TH) : 

<TD valign="top" width="20%">Pere</TD> 

<TD valign="top" width="20%">Jean</TD> 

<TD align="right" valign="top" width="30%">30</TD> 

<TD align="right" valign="top" width="25%">l, 83</TD> 

Pour corser les choses, le total des pourcentages est meme cette fois 
different de 100%... 

5 Enregistrez votre fichier, mais cette fois-ci sous le nom 
FamilleTest.html, puis examinez le resultat dans votre navigateur. 




Figure 4.29 : Ajustement incorrect de la largeur du tableau et des 
cellules 

Manifestement, 1' agent utilisateur a ete deconcerte : il a retenu la plus 
forte des valeurs de largeur specifiees pour les trois premieres colonnes 
(30 % pour les deux premieres colonnes, a cause des largeurs specifiees 
pour les deux premieres cellules de la premiere ligne, puis 30 % pour la 
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troisieme colonne, a cause de la troisieme cellule de la deuxieme ligne) 
et n'a accorde a la derniere colonne que le reste de l'espace disponible, 
soit 10 %. 

Gardez toutefois a l'esprit que, meme si l'emploi de l'attribut width 
n'est pas deconseille, mieux vaut specifier la largeur des tableaux a 
l'aide de feuilles de style. 

Fusion de cellules : attributs rows pan 
et colspan 

Dans un tableau, il est souvent utile de fusionner des cellules, que cela 
soit horizontalement (sur plusieurs colonnes) ou verticalement (sur 
plusieurs lignes), voire les deux. L'attribut rowspan realise une fusion 
verticale tandis que 1'attribut colspan opere une fusion horizontale. 

L'attribut rowspan specifie le nombre de colonnes couvertes par la 
cellule courante. Sa valeur par defaut est "1", la valeur "0" signifiant 
que la cellule couvre toutes les colonnes, depuis la colonne courante 
jusqu'a la derniere colonne de la section de table (voir plus loin les 
elements THEAD, TBODY et TFOOT) dans laquelle la cellule est definie. 

L'attribut colspan specifie le nombre de colonnes couvertes par la 
cellule courante. Sa valeur par defaut est "1", la valeur "0" signifiant 
que la cellule couvre toutes les colonnes, a partir de la colonne courante 
jusqu'a la derniere colonne du groupe de colonnes (voir plus loin 
l'element COLGROUP) dans lequel la cellule est definie. 

Creation d'un tableau a cellules fusionnees a 
l'aide d'un editeur de texte 

Vous allez ici mettre en ceuvre ces nouveaux attributs en modifiant la 
page secondaire Mes regions du site Web, a l'aide d'un editeur de texte. 

1 Ouvrez le Bloc-Notes s'il ne Test pas deja, puis le fichier 
region.html (attention, si vous n'avez pas ferme precedemment le 
Bloc-Notes, le fichier actuel est familleTest.html). 

2 Comme d'habitude, modifiez le numero de version : 

<META name ="version" content="l . 4 .2"> 
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Supprimez la ligne du titre de niveau 2 (H2), puis le paragraphe de 
l'element P. Creez a sa place un nouveau tableau centre, avec sa 
legende (element CAPTION) et son attribut summary) : 



<TABLE border="2" align="center" 
"Presentation de ma region"> 
<CAPTION>Ma region</CAPTION> 
</TABLE> 



summary= 



4 Vous allez creer ici un tableau un peu complexe, employant a la 
fois des fusions de lignes et de colonnes, dont 1' aspect theorique 
est represente dans la figure suivante. 



Tableau 4.3 : Aspect du tableau a creer 


Colonne 1 


Colonne 2 Colonne 3 Colonne 4 


Ligne 1 Cette cellule occupe 1 
colonne et 4 lignes. Elle 

Ligne 2 contiendra par la suite 
une image. 

Ligne 3 
Ligne 4 


Cette cellule s'etend sur 3 colonnes. 

Cellule Cellule Cellule 
individuelle individuelle individuelle 

Cellule sur Cellule sur 2 lignes et 2 
2 lignes colonnes 



Ce tableau possede au total quatre lignes et quatre colonnes. Comme 
cela a deja ete evoque precedemment, un tableau HTML doit se 
construire ligne par ligne. Examinez la premiere ligne theorique : elle 
contient deux cellules, l'une s'etendant sur trois lignes et l'autre sur trois 
colonnes. Entrez le code pour creer cette premiere ligne. 

5 Ouvrez un element de ligne TR (en vous placant au-dessus de la 
balise de fin </TABLE> et en creant de nouvelles lignes), puis 
creez la premiere cellule en la declarant comme s'etendant sur 4 
lignes : 



<TR> 

<TD rowspan= 

</TR> 

</TABLE> 



'4">. . .Une image sera placee ici. . .</TD> 



6 Creez ensuite la seconde cellule, qui doit s'etendre sur trois 
colonnes : 

<TR> 

<TD rowspan="4">. . .Une image sera placee ici. . .</TD> 
<TD colspan="3">Ma region est celebre pour ses forets, 
ses montagnes et ses lacs.</TD> 

</TR> 
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Tableau 4.4 : Cellules creees a la fin de I'etape 6 


Colonne 1 


Colonne 2 Colonne 3 Colonne 4 


Ligne 1 ...Une image sera 
placee ici... 

Ligne 2 

Ligne 3 
Ligne 4 


Ma region est celebre pour ses forets, ses 
montagnes et ses lacs. 

Cellule Cellule Cellule 
individuelle individuelle individuelle 

Cellule sur 2 Cellule sur 2 lignes et 2 
lignes colonnes 



Passons a la seconde ligne. Ouvrez un nouvel element TR, sous la 
ligne precedente, puis creez ses cellules. Vous n'en avez que trois 
a creer, puisque la premiere cellule de cette ligne est sous- 
entendue par 1' extension de la premiere cellule de la premiere 
ligne. 

<TR> 

<TD>Les forets</TD> 

<TD>Les montagnes</TD> 

<TD>Les lacs</TD> 

</TR> 

</TABLE> 



Ligne 1 

Ligne 2 

Ligne 3 
Ligne 4 



Tableau 4.5 : Cellules crees a la fin de I'etape 7 
Colonne 1 Colonne 2 Colonne 3 Colonne 4 



...Une image 
sera placee ici. 



Ma region est celebre pour ses forets, ses 
montagnes et ses lacs. 



Les forets 

Cellule sur 2 
lignes 



Les 
montagnes 



Les lacs 



Cellule sur 2 lignes et 2 
colonnes 



8 Occupez-vous de la troisieme ligne. Creez cette fois uniquement 
deux elements TD, l'un s'etendant sur deux lignes et 1' autre 
occupant deux lignes et deux colonnes : 

<TR> 

<TD rowspan="2">Ici, du texte a completer </TD> 

<TD rowspan="2" colspan="2">Ici, une autre image </TD> 

</TR> 

</TABLE> 
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Tableau 4.G . 


Cellules creees a la fin de I'etape 8 




Colonne 1 


Colonne 2 


Colonne 3 Colonne 
4 


Ligne 1 

Ligne 2 

Ligne 3 
Ligne 4 


...Une image se 
placee ici... 


"a Ma region est celebre pour ses forets, ses 
montagnes et ses lacs. 


Les forets 


Les Les lacs 
montagnes 


Ici, du texte 
completer. 


a Ici, une autre image. 



9 Et la quatrieme ligne ? Comme le montre la figure precedente, 
elle est deja implicitement creee : sa premiere cellule par la 
premiere cellule de la premiere ligne, la seconde par la seconde 
cellule de la troisieme ligne et les deux dernieres par la troisieme 
cellule de la ligne precedente. Pour la bonne forme, inserez tout 
de meme un element TR vide : 

<TRX/TR> 

1 Enregistrez le fichier, puis examinez la page dans votre 
navigateur: 







^^ 






Fichier Edition Ai?>i:r-t;:^ Alter .i M-3rqije-!i3ges OijjIs ; 















<^3 - l^' - fg |U file:»KJHTnLyn«i»i20Sit(_J (9 OK |GL 






Ma region 




- 






Ma rsgiorj est celebre pour ses rorets, ses montagnes et 
...Une image sera places 1 ' i ' : " 


ses 






ici... Les forets Les montagnes 




ici, du texte a completer Ici, une autre image 






■■.,-..■ 


2l 




I „_» 







Figure 4.30 : 

Aspect de la page 
Region dans un 
navigateur 



Voici le code complet de la page : 



Listing 4-4 : Fichier region.html (version 1.4.2). 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"XHTML> 
<HTML> 
<HEAD> 

<TITLE>Ma region</TITLE> 

<META name="author" content="Fabrice Lemainque"> 
<META name ="version" content="l . 4 . 2"> 
</HEAD> 
<BODY> 
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<TABLE border="2" align="center" summary= 
"Presentation de ma region"> 
<CAPTION>Ma region</CAPTION> 
<TR> 

<TD rowspan="4">. . .Une image sera placee ici. . .</TD> 

<TD colspan="3">Ma region est celebre pour ses forets, 

ses montagnes et ses lacs.</TD> 
</TR> 
<TR> 

<TD>Les forets</TD> 

<TD>Les montagnes</TD> 

<TD>Les lacs</TD> 
</TR> 
<TR> 

<TD rowspan="2">ici, du texte a completer </TD> 



<TD rowspan="2" 
</TR> 
</TABLE> 

<P align="center"> 
<A href="pageaccl_ 
d'accueil</A> 
</P> 
</BODY> 
</HTML> 



colspan="2">Ici, une autre image</TD> 



_1 ,html">Retour vers la page 



Fichier Edition Affichage A[Ibs a M^r::ju~?- pages Outils 



<*• 



f^} ||J File:///G:/HTML/Mon%20SitEjJ © OK |Or 



Ma region 



...Une image sera placee 

ICI... 


j.r ses forets, ses montagnes et ses 
lacs 


Les forets Les montagnes 


ici, du texte a completer Ici, une autre image 



Retour vers la page d'accueil 



•j 



Figure 4.31 : 

Aspect de la page 
Region dans un 
navigateur 



Une bonne methode consiste a toujours proceder comme nous l'avons 
fait ici, c'est-a-dire en tracant un quadrillage sur une feuille de papier et 
en indiquant les cellules deja creees : cela diminue fortement les risques 
d'erreur et les surprises desagreables susceptibles d'en resulter. 

Creation d'un tableau a cellules fusionnees 
a I'aide d'un editeur HTML 

Comme nous l'avons dit auparavant, les tableaux tel celui de cet 
exemple peuvent rapidement devenir tres complexes : ce sont 
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probablement eux qui meritent le plus le recours a un editeur HTML. 
Nous allons concevoir a nouveau le meme tableau, mais cette fois a 
l'aide de Nvu. 

1 Ouvrez Nvu. Bonne nouvelle, contrairement a Amaya, l'interface 
est localisee, si toutefois vous avez telecharge la bonne version 
(nous employons ici la version 1.0PR (20050330)). 

2 Saisissez Ma region. Cliquez sur la fleche de la zone de liste 
deroulante, a cote de Corps de texte et, choisissez dans la liste 
Titre 1. 



jni*i 



Fichier Edition AiTich-ags Insertion rormat Tableau Outil'j fiitis 



H 9 



4? 88 



Or\h GljI aph e Tr. L . -■■■ :r. 



Corps de ley. 



Coritsnsui' csnii-iqije (civ) 



'|a-a*||b> up 



~~3 I * '~ D -' t'i r !I 



'" '»'• 



Normal | Ballsy HTML | Source | A P er E u 



| <body> <hli 



Figure 4.32 ; Creation d'un titre de niveau 7 

Placez-vous a la fin du titre, puis appuyez sur [<3 

3 Cliquez sur l'icone Tableau. Cela affiche une nouvelle fenetre, qui 
permet de definir le tableau a creer. 



Rapidement | Pr easement | Cellule | 










■ 


■ 
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2x2 














Edition ...nceo. | 



Figure 4.33 : 

Bolte de dialogue Inserer un tableau 
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Vous allez immediatement modifier les attributs de votre tableau 
(en realite de l'element TABLE). Cliquez sur Edition avancee. 
Vous voyez que Nvu a deja defini trois attributs avec des valeurs 
par defaut : cellspacing, cellpading et border. 



ij.iijjiij.ij-i.u.i.ijyj jj.wmwg— 



Attributs obstante pour : 



Attributs HTML | Style intstrie j Eveneiiienb .1-ivaScript | 


Attribut Valeur 


cellspacing 2 


cell padding 


2 


border 


1 




Cliquez sur un item ci-des«<j; pour modifier se valeur Supprimer 
Attribut : Valeur : 


1 Jl 



Figure 4.34 : 

Editeur des proprietes 
avancees 



Vous voulez ajouter deux attributs summary et align. Ouvrez la 
zone de liste deroulante Attribut et choisissez summary. Dans la 
zone de texte Valeur, saisissez Presentation de ma region. 
Ouvrez a nouveau la zone de liste deroulante Attribut et choisissez 
align. Ouvrez la zone de liste deroulante Valeur et choisissez 
center. La fenetre Editeur des proprietes avancees doit 
ressembler a ce qui est presente dans la figure qui suit. Confirmez 
par OK pour revenir a la fenetre Inserer un tableau. 



Attributs ojurants pour : 



Attributs HTML [ Style interne j Evei-ierriais 1ayaS::ri;>i: 



'I i it i 
cell padding 

border 



Presentation de ma region 



.>.zte<. 



Clique: ;ur un item d-dsssu; pour modifier se v-ikut 
Attribut : Valeur : 



•^| Icenterj 



"3 



J 



Figure 4.35 : 

Fenetre Editeur des 
proprietes avancees 
renseignee 



LE GUIDE COMPLET 113 






Listes et tableaux 



Nous voulons un tableau de quatre lignes et quatre colonnes : 
selectionnez dans cette fenetre quatre lignes et quatre colonnes, 
puis cliquez sur OK. 

Selectionnez les cellules de la premiere colonne, puis choisissez 
dans le menu Tableau > Fusionner les cellules selectionnees : les 

quatre cellules concernees fusionnent. 

Selectionnez les trois dernieres cellules de la premiere ligne, puis 
choisissez a nouveau dans le menu Tableau > Fusionner les 
cellules selectionnees : les trois cellules concernees fusionnent. 

De la meme facon, faites fusionner les secondes cellules des 
lignes 3 et 4, puis les deux dernieres cellules des lignes 3 et 4. 



JQ|X| 



Fichier Edition Affichage Insertion Format Tableau Outils Aide 

' - -» H 9 \ <& " Jl 



Ouurir Enregiiiiw Pubiier MduigjUMj: 



■^ 



Lien Image Tableau Formulaire Orthographt 



~3\*-j>\a'K\bi u| 






~) TJ | Largeur variable _-J | « tj '■'■'■— Z 



Ma l'egion 



Normal | Balises HTML | Source | ■• . Aperfu | 



Figure 4.36 : Aspect de la page Ma region apres I'etape 8 

9 Placez-vous dans la premiere cellule et saisissez . . .Une image 
sera placee ici... Placez-vous dans la seconde cellule de la 
premiere ligne et saisissez Ma region est celebre pour ses 
forets, ses montagnes et ses lacs. Saisissez dans les 
cellules vides de la seconde ligne respectivement Les forets, 
Les montagnes et Les lacs. 

10 Sur la troisieme ligne, saisissez dans la seconde cellule Ici, du 

texte a completer et dans la troisieme Ici, une autre 
image. 
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11 II subsiste quelques details a regler : placez-vous sur le titre de 
niveau 1 et choisissez dans la barre d'outils Format > Aligner > 
Centrer. Cela centre le titre. Ensuite, vous ne devez pas oublier 
d'ajouter un nom d'auteur. Cela est accompli a l'aide de l'option 
de menu Outils > Preferences. La page Options s'affiche. Cliquez 
sur Parametres de pages et, dans la fenetre de droite, saisissez 
dans le champ Auteur mon nom (ou mon nom est votre nom). 

1 2 Le tableau obtenu ressemble beaucoup a ce que nous avions fait 
precedemment, mais a ete realise ici avec une grande facilite. 
Enregistrez votre travail. Choisissez Fichier > Enregistrer sous. 
Le programme vous demande de saisir un titre (le contenu de 
l'element TITLE). Saisissez Ma region et cliquez sur OK. Dans 
la boite de dialogue Enregistrer sous, naviguez jusqu'au dossier 
Mon Site Web et enregistrez le fichier sous le nom region2.html. 



LJimsmummmuMMmmjim 

Fichier Edition Affichage Insertion Format Tableau Outils Aide 



■_lsl*l 



Ouurir Enreqistre 



<JU 



- ~n - , %> 



"Hlf-^lft'AlBJ u\tBi=\Wmmm\i 



a) _J | Large., variable .-Jl^t}. '■'■'■ ^ -= * 



~L 



]VIa region 



I Ma region est cslebre pour ses forets, £"-s rnontagne 3 et ses lacs. 



.Une -image serapiacse :ci.. 



Les forets 



Les montagnes 



ici, dutexte a completer 



Ici, une autre image 



Normal |_0 Balises HTML | \H Source | . Apercu | 



J 



Figure 4.37 : Aspect de la page terminee dans I'editeur Nvu 

1311 serait maintenant interessant d'examiner le code source ainsi 
genere. Rien de plus simple : cliquez en bas de la fenetre sur 
l'onglet Source. Le code source s'affiche (voir Figure 4.38). 

Ce code est tres semblable a celui cree manuellement. Remarquez 
toutefois quelques differences : 
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<* H © 



Ouvrir Enreglst 



"3|^-^|a-a*|b ; u| 



sans dasse) ^J | Largeur variable ~] ^ 



••W^v | ..;■ | 



14.</heacl> 

15.<l)ody> 

S . <lil style=" text-align: ci 

7. E£eaeute;gion</hl> 

5 . < table sumnarjp 1 Prieacuti 
9 . style= "margin-left : auti 

0. bordec= ,, l" cellpaddincj- 

1. <tliody> 

2. <tr> 

3. <td colspan=" 
4 . align= "undefined" ' 
5. image sera placieac 

6 . <td colspaji=" : 

7. align^ "undefined" valign=" undefined 

8. c£eaeute;gion est cfieacute; l£egrave;fcn:e 

9 . pour ae3 for£ecirc;ts, ses inontagnes et 

1 Norma l j [td| Balises HTML | E Source | . Apercu | 



r; : - -Ha 



iarg in-right : auto 
cellspacitig =,, 2"> 



Eowspan="4" 

lign="undef ined"> . . . Une 
e;e ici£hellip;</td> 
rowsjiaii=" 1" 

Ha 



align: left; 



Figure 4.38 : Code source de la page 

Comme nous l'avons deja vu auparavant, les caracteres accentues 
sont representees par des sequences « bizarres » de caracteres. 
Nous examinerons ceux-ci dans le prochain chapitre. 

La balise TABLE emploie un nouvel attribut (style= "margin 
—left: auto; margin— right : auto; text— align: left; 
width: 100%; "). II sera examine en detail dans le Chapitre 8, 
traitant des feuilles de style. 

Les balises TD se voient dotees d'attributs que nous connaissons, 
mais possedant la valeur "undefined" (<td colspan="l" 
rowspan= M 4 M align= M undef ined" valign= M undef ined">) . 
C'est un des petits problemes des editeurs HTML, qui inserent 
automatiquement des balises et attributs supplementaires, ce qui 
alourdit le code. Lorsque HTML constate 1' absence de ces 
attributs avec une valeur specifiee, il considere qu'ils sont 
presents avec leur valeur par defaut : il est done superflu de les 
ajouter, cela alourdissant inutilement le code. 

i II manque cependant 1' element MET A indiquant la version du 
fichier : ajoutez-la manuellement, puis enregistrez le fichier en 
cliquant sur Enregistrer. 

Comme vous venez de le voir, il est bien plus simple de creer un tableau 
a l'aide d'un editeur HTML comme Nvu que de le batir de toutes pieces 
dans un simple editeur de texte, a moins de faire preuve d'une rare 
maitrise du code HTML ! 
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Cellules manquantes et cellules se recoupant 

Deux problemes sont frequents avec les tableaux possedant des cellules 
fusionnees : l'oubli d'une cellule dans une ligne et le recouvrement de 
cellules. Pour voir ce qui se passe dans ces conditions, nous allons 
modifier a l'aide d'un editeur de texte la page region.html. 

1 Ouvrez le Bloc-Notes s'il ne Test pas deja, puis ouvrez le fichier 
region.html. 

2 Par securite, enregistrez-le tout de suite sous le nom 
region _erreur. html. 

3 Modifiez le titre (element TITLE) : 

<TITLE>Ma region (page avec erreurs) </TITLE> 

4 Comme d'habitude, modifiez le numero de version : 

<META name ="version" content="l . 4 . 1"> 

5 Modifiez la legende (element CAPTION) : 

<CAPTION>Ma region (tableau avec erreurs) </CAPTION> 

6 Vous allez d'abord creer une nouvelle ligne en « oubliant » une 
cellule. Pour ce faire, placez-vous avant la balise de fermeture 
</TABLE>, appuyez sur (Tjj] puis saisissez : 

<TR> 

<TDXBRX/TD> 

<TDXBRX/TD> 

<TDXBRX/TD> 

</TR> 

Une astuce a ete utilisee ici : pour creer une cellule vide qui 
possede toutefois un ecartement entre ses bordures, inserez dans 
celle-ci un saut de ligne (<BR>). Cela n'augmente pas l'espace 
blanc, mais cree une cellule vide. 



ASTOCE 



Cellule vide 

Pour creer une cellule vide qui affiche cependant un ecartement entre 
ses bordures, inserez dans celle-ci un saut de ligne (<br>). 



XHTML 

IEMMUE _, ,^ TTr ™ ,-, , ■ ■ 

Souvenez-vous : en XHTML, vous devez saisir <br />. 
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7 Enregistrez votre fichier, puis examinez-le dans un navigateur. 
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Figure 4.39 : Aspect de la page region_erreurs apres I'etape 7 

Curieux, non ? II y a bien une erreur, mais pas celle a laquelle vous vous 
attendiez. Pluto t que de voir une nouvelle ligne a laquelle manque une 
cellule, trois cellules sont ajoutees a la droite de la derniere ligne... 

Reflechissez : si le tableau comportait theoriquement quatre lignes de 
quatre cellules (reportez-vous a la figure page 1 10), il a ete precise que 
la quatrieme ligne etait creee implicitement, dans la mesure ou toutes les 
cellules de la ligne precedente (la troisieme) s'etendaient sur deux lignes 
(en realite, quatre pour la premiere cellule, qui debute sur la premiere 
ligne). Le Listing page 110 ne presente effectivement que trois elements 
TR. Lorsque vous ajoutez un nouvel element TR, celui-ci est considere 
comme etant la quatrieme ligne, possedant deja quatre cellules definies. 
Les trois nouvelles cellules vont done s'ajouter a la droite de celles-ci, 
sur cette meme ligne, d'oii 1' aspect affiche. 

8 Ajoutez un element ligne vide (<trx/tr>) avant la balise 
d'ouverture de celui que vous venez d'inserer. Enregistrez votre 
fichier, puis examinez-le dans un navigateur. 
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Figure 4.40 : Aspect de la page region_erreurs apres I'etape 6 
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Une ligne supplementaire apparait bien : elle comporte une cellule de 
moins que ce qui est normalement necessaire, comme vous vous y 
attendiez. 

Remarquez que cet exemple demontre qu'il est inutile, voire dangereux, 
de creer des cellules s'etendant sur plusieurs lignes lorsque toutes les 
cellules d'une ligne s'etendent vers le bas d'un meme increment : cela 
reste invisible a l'ecran et risque d'entrainer par la suite des erreurs, en 
cas de modification de la page. Mieux vaudrait ici supprimer l'attribut 
rowspan="2" dans les cellules de la troisieme ligne, et modifier 
1'attribut de la premiere cellule en rowspan="3". Vous pourrez alors 
supprimer en toute securite 1' element ligne vide. Faites-le done. 

8 Vous allez maintenant definir des cellules qui se chevauchent. 
Modinez le second element TD du second element TR (done en 
realite la troisieme cellule de la seconde ligne) : 

<TD rowspan="2">Les montagnes</TD> 

9 Enregistrez votre fichier, puis examinez-le dans votre navigateur. 
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Figure 4.41 : Aspect de la page region_erreurs apres I'etape 8 

En theorie, cette cellule se recoupe desormais avec la troisieme cellule 
de la troisieme ligne. En pratique, la restitution de cette erreur (car e'en 
est une) peut varier selon le mode de gestion de F agent utilisateur 
concerne. Ici, pratiquement quel que soit le navigateur employe, la 
cellule « Les montagnes » s'etend vers le bas, la cellule normalement 
situee au-dessous etant repoussee vers la droite et semblant ne plus 
s'etendre lateralement sur deux cellules. Cela est d'ailleurs faux : 
verifiez-le. 

10 Ajoutez une cellule vide (<tdxbrx/td>) apres la cellule « Les 

lacs » : 

<TD>Les lacs</TD><TD><BRx/TD> 
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11 Enregistrez votre fichier, puis examinez-le dans votre navigateur. 
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Figure 4.42 : Aspect de la page region_erreurs apres I'etape 10 

Vous voyez, grace a l'apparition de la nouvelle cellule, que la cellule 
« Ici, une autre image » s'etend bien sur deux cellules. Le code de ce 
tableau prodigieusement laid, puisque bourre d'erreurs, est presente dans 
le listing suivant, comme exemple a ne surtout pas suivre : ne creez 
jamais de cellules se recouvrant ! 

Listing 4-5 : Fichier region erreurs.html. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"XHTML> 
<HTML> 
<HEAD> 

<TITLE>Ma region (page avec erreurs) </TITLE> 
<META name="author" content=" Justin Bogue"> 
<META name ="version" content="l . 4 . 1"> 
</HEAD> 
<B0DY> 

<TABLE border="2" align="center" 

summary="Presentation de ma region"> 
<CAPTION>Ma region (page avec erreurs) </CAPTI0N> 
<TR> 

<TD rowspan="3">. . .Une image sera placee ici...</TD> 
<TD colspan="3">Ma region est celebre pour ses forets, 
ses montagnes et ses lacs.</TD> 
</TR> 
<TR> 

<TD>Les forets</TD> 
<TD rowspan="2">Les montagnes</TD> 
<TD>Les lacs</TDXTDXBR></TD> 
</TR> 
<TR> 

<TD>ici, du texte a completer </TD> 
<TD colspan="2">Ici, une autre image </TD> 
</TR> 
<TR> 

<TDXBRX/TD> 
<TDXBRX/TD> 
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<TDXBRX/TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 

Regroupement de lignes : elements THEAD, 
TFOOT et TBODY 

II est possible de regrouper les lignes d'un tableau dans des sections 
d'en-tete, de pied et de corps (a l'aide respectivement des elements 
THEAD, TFOOT et TBODY). Ces regroupements apportent des 
informations de structure supplementaires, qui peuvent etre utilisees par 
les agents utilisateurs pour souligner cette structure. Les agents 
utilisateurs peuvent exploiter le decoupage en-tete/corps/pied de facon a 
faire defiler le corps independamment des sections d'en-tete et de pied. 
Pour l'impression d'un grand tableau, les informations d'en-tete et de 
pied peuvent etre repetees sur chacune des pages qui contiennent les 
donnees du tableau. 

Chacun de ces elements encadre au moins un element TR. lis possedent 
tous les attributs facultatifs standard ainsi que les attributs d'alignement, 
qui seront alors appliques a toutes les cellules du groupe de lignes. 

Si vous utilisez ces elements, l'element TFOOT doit preceder l'element 
TBODY dans votre code HTML, ann que les navigateurs Web puissent 
afficher les informations du pied avant de charger la totalite des lignes 
de donnees. 

Les sections THEAD, TFOOT et TBODY doivent contenir le meme nombre 
de colonnes. Plusieurs elements TBODY peuvent coexister. L'exemple 
suivant illustre l'ordre et la structure des en-tetes, pieds et corps de 
tableau. 

<TABLE> 
<THEAD> 

<TR> ...informations d'en-tete... 
</THEAD> 
<TFOOT> 

<TR> . . .informations de pied. . . 
</TFOOT> 
<TBODY> 

<TR> . . .premiere rangee des donnees du bloc 1. . . 

<TR> . . .seconde rangee des donnees du bloc 1. . . 
</TBODY> 
<TBODY> 
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<TR> 
<TR> 
<TR> 
</TBODY> 
</TABLE> 



. .premiere rangee des donnees du bloc 2. . 
. . deuxieme rangee des donnees du bloc 2. . 
. . troisieme rangee des donnees du bloc 2. 



Nous allons examiner un exemple plus concret. Supposons que dans vos 
passions figurent les ouvrages de science-fiction : vous avez con£u une 
liste d'une cinquantaine d'ouvrages, repartis en plusieurs themes, que 
vous avez presentee en tableau. Celui-ci se trouve dans une page 
nommee SF.html, qui est connectee a votre page Mes passions. Par pure 
charite, nous vous epargnerons la saisie de ce tableau, pour ne vous en 
presenter que le resultat. 
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Figure 4.43 : Page avec tableaux renfermant des elements THEAD, TBODY 
et TFOOT. 

En apparence, ces regroupements sont sans effet : ils n'entrent en jeu 
que pour un affichage progressif et une impression. La figure suivante 
presente un extrait du code source de la page (voir Figure 4.44). 

La balise ouvrante de 1' element TBODY est toujours obligatoire si le 
tableau possede un en-tete ou un pied. Elle peut etre omise en leur 
absence. Les balises fermantes des trois elements TBODY peuvent etre 
omises, mais cela reste deconseille. 



Regroupement de colonnes 
et COLGROUP 



elements COL 



Comme vous devez 1' avoir desormais bien compris, HTML regroupe les 
cellules de donnees en lignes a l'aide de 1' element TR. Chaque element 
TR signale une nouvelle ligne du tableau, ces lignes se presentant en 
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sequence, du haut vers le bas. II n'existe pas d'element correspondant 
TC pour les colonnes d'un tableau : il est par consequent parfois delicat 
de placer des donnees en colonnes dans un tableau : il faut s' assurer que 
chaque ligne possede suffisamment de cellules, et que chaque colonne 
contient bien les bonnes donnees. 
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Fail 



Ail i>: hags 



<>EQCTYPZ httel PUBLIC "-//W3C//DTD HTML 4.01 

Transi t i onal//EU"> 

<HIML> 

<HEAP> 

<TITLE>Science-f ict ion</TITLE> 

<MET& name="auchor" content="Fakn:ice Lettiainque"> 

<META name ="version" oontejit = "l . 5 . 1"> 

</HEAD> 

<B0DY> 

<H1 align-"center ,, >3cience-fictioti : tnes ouvrages 

f avoris</Hl> 

< TABLE Jiorder = "l" align="center " wiilth="100%" sumnai:y="Liste 

de ities ouvragea de science-fiction preferes, present es par 

auteur, tltre et comment aire et regroupes pat: type"> 

<CAPTIOH>Livres de science-fiction favoris, regroupes par 

type et classes par auteur, titre et commentaire.</CJU?TI01T> 

<C0LGROUP span="3 ,r valign= ,, top"> 

<THEflD> 

<TRxTH width="2 5V>Auteur</THxTH 

wiath="2 5V , >Titre</THXTH>Coramentaii:e</THX/TR> 

</THEAD> 

<TB0DY> 

<DIV iil= "Class ique" class- "type5F"> 
<TR> 
<TH colspan="3"> 

<SPAJT olass-"SFcla3sique">Auteurs "class:: xu.es" 
SF</SPAHx/TH> 
<TR> 

<TD>Asimov, Isaac (192 1-1998) </TD><TD>Fondation 
(1951) <BR>Seconde ± ondation<BR>Fondation et Empire<BR>Les 
RoJoots</TDXTD>Un des premiers auteurs de SF, et l'un des 
plus prolixes avec plus de 3DD ouvrages . A l'origine d' un 
certain nombre de traditions. On retiendra particulierement 
sa saga des Fondations et celles des robots : Asimov est le 
pere des celebres "Trois lois de la robotique" .</TDx/ ■■■> 






Figure 4.44 ; 

Code source de la page 
sf. html 



HTML 4.0 permet toutefois d'effectuer un regroupement structurel de 
colonnes a l'aide de l'element COLGROUP et dans le but d'une mise en 
forme a l'aide de l'element COL. Cette structure peut etre mise en 
evidence grace aux feuilles de style ou a des attributs HTML (comme 
l'attribut rules pour l'element TABLE). 

Un tableau contient soit un unique groupe de colonnes implicite (pas 
d'element COLGROUP), soit un certain nombre de groupes de colonnes 
explicites, delimites chacun par une instance de l'element COLGROUP. 

Quand il est necessaire d'isoler une ou plusieurs colonnes (par exemple, 
pour une information de style ou de largeur specifique) au sein d'un 
groupe, les auteurs doivent identifier cette colonne avec un element COL. 
L'element COL permet de partager des attributs entre plusieurs colonnes, 
sans faire appel a un regroupement structurel. 
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Ces deux elements possedent un attribut capital, span, dont la valeur est 
un entier superieur a et qui specifie le nombre de colonnes concernees. 
Sa valeur par defaut est 1 : c'est cette valeur qui est employee lorsque 
1' attribut est absent, ce qui correspond a un groupe ne contenant qu'une 
seule colonne. 

Lorsque cet element est present dans un element COLGROUP, les agents 
utilisateurs doivent l'ignorer si l'element contient un ou plusieurs 
elements COL. 

L'interet de l'attribut span est qu'il permet de regrouper les 
informations concernant les largeurs de colonnes. Ainsi, si une table 
contient n colonnes, chacune d'elles ayant une largeur de 30 pixels, il est 
plus facile d'ecrire : 

<C0LGR0UP span="n" width="30">...</COLGROUP> 

que : 

<C0LGR0UP> 

<C0L width="30"> 

<C0L width="30"> 

...jusqu'a totaliser n elements COL... 
</C0LGR0UP> 

Pour appliquer une information de style particuliere a la colonne m d'un 
tableau possedant n colonnes, vous l'isolez comme suit : 

<C0LGR0UP width="20"> 

<C0L span="m-l"> 

<C0L id="mise-en-forme-particuliere"> 

<COL span="n-m"> 
</C0LGR0UP> 

Un second attribut, width, specifie la largeur par defaut de chaque 
colonne dans le groupe de colonnes courant. Sa valeur peut etre 
exprimee comme habituellement en pixels, en pourcentage ou de facon 
relative, mais egalement a l'aide de la forme speciale "0*" (zero et 
asterisque). Celle-ci stipule que la largeur de chaque colonne du groupe 
doit etre suffisante pour rendre le contenu de la colonne. Ceci implique 
que ce contenu soit connu en totalite avant que la largeur ne puisse etre 
calculee exactement. La specification de la valeur "0*" va done 
empecher l'agent utilisateur d'effectuer une restitution progressive du 
tableau. 

Comme pour span, un attribut width present dans un element COL 
outrepasse celui present dans COLGROUP, pour les colonnes concernees. 
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II est capital de bien comprendre les roles respectifs de ces deux 
elements : si l'element COLGROUP est un rassemblement structurel, 
1' element COL rassemble les specifications d'attributs pour les colonnes 
du tableau, mais ne rassemble pas les colonnes de maniere structurelle. 
Les elements COL sont vides et ne servent que de support pour les 
attributs. lis peuvent apparaitre a l'interieur comme a l'exterieur d'un 
element COLGROUP. 

Ces deux elements acceptent les attributs d'alignement horizontal et 
vertical deja rencontres (align et valign), ainsi que l'attribut width. 

Les copies d'ecran de la page 134 montrent la page precedente, sf.html, 
ayant recours a un simple element COL place apres la balise ouvrante de 
l'element TABLE (<COL span="3" valign="top">) pour definir 
l'alignement vertical dans les cellules : cela fonctionne parfaitement 
avec Internet Explorer et Amaya, mais malheureusement pas avec 
Firefox. Vous pouvez mettre en forme les colonnes en travaillant 
individuellement sur chaque cellule de la colonne, comme cela a ete 
decrit precedemment : une tache laborieuse qui augmente fortement la 
faille du code source, mais demeure helas la seule solution de 
compatibilite avec les navigateurs non standard. 
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Science-fiction : mes ouvrages favoris 

Livres de science-fiction favoris, regroupes par type el classes par auteur, litre el commentaire. 




d 








Auteiir 


Titre | Camimidaire 








Aiiteiirs "clnssiqiies" SF 






Asirnov, Isaac (1521-199S) 


Fondation (1951) 
Seconde fondation 
Fondation et Empire 
Les Robots 


Un des premier:" auteurs de SF., et Tun des plus prolines avec plus 
de 300 ouvrages. A 1' origins d'un certain nombre de traditions. On 
rstisndra particulieremeri.t *a sa;-d des Focdations ei cdJeis dew 
robots : Asimov fsl le pare des celsbrss "Trnis lots de la robotique". 






Andrevon, Jean-Pierre 


Les homines -rnachines centre 
Gandahar 


Un des premiers e(. plus grands auteurs francais. Ses ceuvres onl 
cependant rnal vieifii. 






Blish, James. 


Le lendernain du jugernent dernier 


Fas lout a fail de la. SF ; pas tout a fait du tantastique. et surtouf pas 
del' heroic fantasy 






Bradbury, Ray 


Fahrenheit 451 (1955) 
Chrorjiques rnarti.en.nes 








Bradley, Marion Zirnrner (1930-) 


L 1 etoile du danger 


Irnposee en France par les Dames du lac et les brumes d'Avalon. 
Surtuut celebre par set cycle de la Romance de Tenebreuse. 






Finished! 







Figure 4.45 : Page sf.html avec recours a des elements COL examinee sous 
differents navigateurs 
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Andre von, Jean-Pierre 
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Figure 4.46 : Sous un autre navigateur 
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Figure 4.47 : Sous encore un autre navigateur 



A 



Fusion de cellules appartenant a differents regroupements 

Vous devriez avoir deja soupconne que creer des elements COLGROUP 
ou COL n'empechait pas la fusion de cellules individuelles qui 
appartiennent a des elements differents. Cela est possible, mais mieux 
vaut vous en abstenir. Selon 1' agent utilisateur, la cellule ainsi fusionnee 
peut prendre les proprietes du premier element ou du second element de 
regroupement, voire empecher simplement l'affichage correct du tableau. 
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II est possible d'imbriquer des tableaux : un tableau peut se trouver a 
l'interieur d'une cellule d'un autre tableau. Cela peut devenir extremement 
complexe a comprendre dans le code HTML : prenez garde a bien utiliser 
des indentations pour savoir dans quel tableau vous vous trouvez ! 

Prenons un exemple simple : 

1 Ouvrez le Bloc-Notes s'il ne Test pas deja, puis ouvrez le fichier 
region.html. 

2 Comme d'habitude, modinez le numero de version : 

<META name ="version" content="l . 4 .3"> 

3 Modinez la legende (element CAPTION) : 

<CAPTION>Ma region (tableaux imbriques) </CAPTION> 

4 Comme vous l'avez fait dans la page region _erreurs, supprimez 
l'attribut rowspan="2" dans les cellules de la troisieme ligne, et 
modinez l'attribut de la premiere cellule en rowspan="3". 

5 Placez-vous dans la deuxieme cellule de la troisieme ligne, 
autrement dit dans le premier element TD du dernier element TR. 
Effacez le texte « Ici, du texte a completer », appuyez deux fois 
sur (+3 et placez-vous sur la premiere ligne vierge. 

6 Saisissez le fragment de code suivant, creant un nouveau tableau 
imbrique : 

<TABLE align="center" border="l" width="100%"> 

<CAPTION>Donnees climatologiques</CAPTION> 
<TR> 

<TH>Temp. Max.</THXTD align="right">18 °</TD> 
</TR> 
<TR> 

<TH>Temp. min.</THXTD align="right">-3, 1 °</TD> 
</TR> 
<TR> 

<TH>Pluie</THX/THXTD align="right">682 mm</TD> 
</TR> 
</TABLE> 

7 Remarquez que nous avons retenu ici une nouvelle disposition : 
les en-tetes sont disposes en colonne et non plus en ligne. 
Enregistrez ce fichier et examinez-le dans votre navigateur. 
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Figure 4.48 : Tableaux imbriques 



Autres precisions concernant les tableaux 

La puissance et la richesse des tableaux font qu'ils sont largement 
employes comme outils de conception, et ce sur la grande majorite des 
sites. Cela pose encore quelques problemes lies a la compatibilite entre 
navigateurs. Plus encore, en utilisant exactement la meme version du 
meme navigateur sur deux machines differentes, vous pourriez voir tout 
le tableau sur l'une et etre oblige de faire defiler l'ecran sur la seconde. 

Un tableau doit etre concu avec la plus grande prudence. Par exemple, 
en definissant l'attribut width (largeur) en pixels, le tableau cesse d'etre 
universel et n'offre un resultat parfait qu'a ceux qui possedent 
exactement la meme resolution d'ecran et la meme taille de fenetre. 

Si vous voulez absolument utiliser des tableaux pour realiser votre mise 
en page, et si les feuilles de style n'apportent pas de reponse 
satisfaisante (ce qui serait pour le moins surprenant), veillez a defmir 
l'attribut width en pourcentage, le pourcentage de la fenetre devant etre 
occupe par chaque colonne ou cellule. 

Pour restituer un tableau, tout agent utilisateur peut effectuer les 
operations suivantes : 

Restituer le contenu de l'attribut summary. II est preferable de 
fournir une description du contenu et de la structure du tableau 
afm que les visiteurs qui emploient des agents utilisateurs non 
visuels puissent mieux la comprendre. 

Restituer la legende (element CAPTION), si elle est presente. 

Restituer l'en-tete et/ou le pied du tableau (si presents). Par 
exemple, s'il s'agit d'un media pagine en sortie, les agents 
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utilisateurs peuvent placer l'en-tete en haut de chaque page et le 
pied en bas de chacune d'elles. De la meme maniere, si 1' agent 
utilisateur fournit un mecanisme pour faire defiler les rangees, 
l'en-tete peut apparaitre en haut de la zone qui a defile et le pied 
en bas de celle-ci. 

Calculer le nombre de colonnes dans la table (c'est le nombre 
d'elements TR de l'element TABLE). 

Regrouper les colonnes en fonction des eventuelles specifications 
de regroupement de colonnes. 

Restituer les cellules, rangee par rangee et regroupees dans les 
colonnes appropriees, entre l'en-tete et le pied. Les agents 
utilisateurs devraient mettre en forme le tableau d'apres les 
attributs HTML et les specifications de la feuille de style. 

Le modele de tableau HTML 4.01 a ete concu pour que les agents 
utilisateurs puissent restituer progressivement les tableaux, plutot que de 
devoir attendre la reception de la totalite des donnees avant de 
commencer la restitution. Pour que cela soit possible, les concepteurs 
doivent indiquer le nombre de colonnes du tableau ainsi que la largeur 
de ses colonnes. 

Plus precisement, 1' agent utilisateur peut restituer un tableau en une 
seule passe quand les largeurs de colonnes sont specifiees a l'aide d'une 
combinaison d'elements COLGROUP et COL. Si une des colonnes est 
specifiee en termes relatifs ou en pourcentage, il faut aussi specifier la 
largeur du tableau en question. 

Les agents utilisateurs visuels permettent aux personnes voyantes 
d'embrasser rapidement la structure du tableau a partir des en-tetes (th) et 
de la legende (caption). En revanche, ceux-ci seront souvent inadaptes 
pour les personnes qui dependent d' agents utilisateurs non visuels. 

Les agents utilisateurs visuels devraient eviter le rognage de toute partie 
du tableau contenant la legende, a moins de fournir un moyen pour 
acceder a toutes les parties du tableau, par exemple par defilement 
horizontal ou vertical. 

Calcul du nombre de colonnes dans 
un tableau 

II existe deux facons de determiner le nombre de colonnes dans une 
table (par ordre de priorite) : 
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1 Si l'element TABLE contient des elements COLGROUP ou COL, les 
agents utilisateurs calculent comme suit le nombre de colonnes : 

— Pour chaque element COL, prendre la valeur de son attribut 
span (la valeur par defaut est "1"). 

_ Pour chaque element COLGROUP contenant au moins un 
element COL, ignorer l'attribut span de l'element COLGROUP. 
Pour chaque element COL, effectuer les calculs de l'etape 1. 

— Pour chaque element COLGROUP vide, prendre la valeur de son 
attribut span (la valeur par defaut etant "1"). 

2 Sinon, quand l'element TABLE ne contient aucun element 
COLGROUP ou COL, les agents utilisateurs devraient fonder le 
nombre de colonnes sur ce qui est requis par les lignes. Le 
nombre de colonnes est egal au nombre de colonnes requises par 
la ligne possedant le plus de colonnes, y compris les cellules qui 
couvrent plusieurs colonnes. Les lignes possedant un nombre de 
colonnes moindre seront garnies de cellules vides en fin de ligne. 
La « fin » d'une ligne depend de la directionnalite du tableau. 

Lorsqu'un tableau contient des elements COLGROUP ou COL et que les 
deux types de calcul n' aboutissent pas au meme nombre de colonnes, 
cela entraine une erreur. 

Une fois que 1' agent utilisateur a calcule le nombre de colonnes dans le 
tableau, il peut les regrouper en groupes de colonnes. 

Heritage des attributs 

Le probleme de 1' heritage des attributs d'alignement dans un tableau 
peut parfois sembler complexe. Certains d'entre eux peuvent etre herites 
de l'element TABLE ou de la ligne a laquelle la cellule appartient. 
Certains peuvent egalement etre herites d'une colonne, a l'aide 
d'elements COLGROUP ou COL. 

Les regroupements de colonnes apportent des informations structurelles 
supplementaires qui peuvent etre exploiters par les agents utilisateurs. II 
est egalement possible de declarer des proprietes de colonnes au debut 
de la definition du tableau (via les elements COLGROUP et COL), pour que 
les agents utilisateurs puissent restituer progressivement la table au lieu 
de devoir attendre que toutes les donnees du tableau soient arrivees 
avant de pouvoir les restituer. 
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L'alignement du contenu des cellules peut etre specifie cellule par 
cellule ou bien peut etre herite des elements qui l'englobent tels que la 
rangee, la colonne ou la table meme. 

L'ordre de priorite (de la plus elevee a la plus basse) des attributs 
d'alignement (align, char et charof f) est le suivant : 

1 L'attribut d'alignement defini sur un element a l'interieur des 
donnees de la cellule (par exemple, un element p). 

2 L'attribut d'alignement defini sur une cellule (les elements TH et 

TD). 

3 L'attribut d'alignement defini sur un element de regroupement de 
colonnes (les elements COL et COLGROUP). Quand la cellule 
appartient a un regroupement de colonnes, la propriete 
d'alignement est heritee de la definition de la cellule initiant le 
recouvrement. 

4 L'attribut d'alignement defini sur un element de ligne ou de 
regroupement de lignes (les elements TR, THEAD, TFOOT et 
TBODY). Quand la cellule appartient a un ensemble de plusieurs 
lignes, la propriete d'alignement est heritee de la definition de la 
cellule initiant le recouvrement. 

5 L'attribut d'alignement defini sur la table (l'element TABLE). 

6 La valeur d'alignement par defaut. 

L'ordre de priorite (de la plus elevee a la plus basse) de l'attribut 
valign (ainsi que des autres attributs herites lang, dir et style) est 
le suivant : 

1 L'attribut defini sur un element a l'interieur des donnees de la 
cellule (par exemple, un element p). 

2 L'attribut defini sur une cellule (les elements TH et TD). 

3 L'attribut defini sur un element de rangee ou de regroupement de 
rangees (les elements TR, THEAD, TFOOT et TBODY). Quand la 
cellule fait partie d'un ensemble recouvrant plusieurs rangees, la 
valeur de l'attribut est heritee de la definition de la cellule initiant 
le recouvrement. 

4 L'attribut defini sur un element de regroupement de colonnes (les 
elements COL et COLGROUP). Quand la cellule appartient a un 
regroupement de colonnes, la valeur de l'attribut est heritee de la 
definition de la cellule initiant le recouvrement. 

5 L'attribut defini sur la table (l'element TABLE). 
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6 La valeur par defaut de l'attribut. 

En outre, lors de la restitution des cellules, l'alignement horizontal est 
determine par les colonnes, de preference aux lignes, tandis que les 
lignes ont la preference sur les colonnes pour 1' alignement vertical. 

II existe un attribut non encore examine, l'attribut dir. Celui-ci defmit 
la directionnalite d'un tableau (qui, par defaut, est de gauche a droite). 
Pour une table de gauche-a-droite, la colonne zero se trouve sur le cote 
gauche et la rangee zero se trouve en haut. Pour une table de droite-a- 
gauche, la colonne zero se trouve sur le cote droit et la rangee zero en 
haut. Lorsqu'il est specifie pour l'element TABLE, l'attribut dir affecte 
aussi la direction du texte a l'interieur des cellules du tableau (puisqu'il 
est herite par les elements de type bloc). 

Pour specifier une table de droite-a-gauche, fixez la valeur de l'attribut 
dir comme suit : 

<TABLE dir="RTL"> 

. . . le reste du tableau. . . 

</TABLE> 

II est possible de modifier la direction du texte dans une cellule 
individuelle en specifiant l'attribut dir dans l'element qui defmit cette 
cellule. 



A 



Element TABLE 

L'element TABLE est le seul pour lequel l'attribut dir inverse l'ordre 
visuel des colonnes : une ligne de tableau (tr) ou un groupe de colonnes 
(COLGROUP) seuls ne peuvent etre inverses independamment. 



Remarquez bien qu'une cellule peut heriter de la valeur d'un attribut 
non de son parent, mais de la premiere cellule d'un recouvrement. II 
s'agit d'une exception aux regies generales d'heritage des attributs. 

Autres mises en forme de tableaux : 
attributs char et char off 

Lors de la premiere publication de la specification, en 1997, la 
specification des feuilles de style CSS1 n'offrait pas de mecanismes 
permettant le controle de tous les aspects de la mise en forme visuelle 
des tables. Depuis lors, la specification des feuilles de style CSS2 a 
ajoute des proprietes qui permettent la mise en forme visuelle des tables. 
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L'attribut d'alignement align employe dans un tableau peut posseder 
une valeur particuliere (align="char"), qui stipule que l'alignement 
est effectue sur un caractere unique present dans un fragment de texte 
qui sert d'axe d'alignement. 

Ce caractere est defini par l'attribut char, dont la valeur par defaut est 
le separateur point decimal pour la langue courante, telle qu'elle est 
definie par l'attribut lang (par exemple, le point « . » pour l'anglais et 
la virgule « , » pour le francais). 

L'attribut charoff, quand il est present, specifie le decalage de la 
premiere occurrence du caractere d'alignement sur chaque ligne. Si la 
ligne ne comprend pas de caractere d'alignement, elle devrait glisser 
horizontalement de maniere a fmir sur la position d' alignement. 

Lors du recours a l'attribut charoff pour fixer le decalage du caractere 
d'alignement, la direction du decalage est determinee par la direction de 
texte courante (telle que specifiee par l'attribut dir). Dans les textes de 
gauche-a-droite (la valeur par defaut), le decalage s'opere a partir de la 
marge de gauche. Inversement, pour les textes de droite-a-gauche, le 
decalage s'effectue a partir de la marge de droite. 

Helas ! Si la specification mentionne effectivement que les agents 
utilisateurs ne sont pas obliges de gerer ces attributs, aucun des 
navigateurs testes n'a ete en mesure de le faire dans leurs versions 
actuelles (Firefox 2.0.0.12, Mozilla 9, Internet Explorer 7.0.5730 et 
Amaya 7.8.3)... 



4.3. Resume 

II est possible de creer en HTML trois types de listes : ordonnees 
ou numerotees, non ordonnees ou listes a puces et listes de 
definitions. 

Une liste numerotee est creee a l'aide de 1' element OL renfermant 
des items de liste LI. II est possible de modifier le type de 
numerotation a l'aide de l'attribut type, la valeur de debut a 
l'aide de l'attribut start et de reinitialiser la numerotation dans 
un item de liste a l'aide de l'attribut value. 

Une liste a puces est creee a l'aide de l'element UL renfermant des 
items de liste LI. II est possible de modifier 1' aspect de la puce a 
l'aide de l'attribut type, pour toute la liste ou pour un item 
particulier. 
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Une liste de definitions est creee a l'aide de 1' element DL 
renfermant des elements enfants DT (terme de definition) et DD 
(description de la definition). 

II est possible d'imbriquer un nombre quelconque de listes de tous 
types. 

Un tableau est cree a l'aide de l'element TABLE. II contient des 
lignes (element tr) et des colonnes creant des cellules pouvant 
renfermer des informations de rubrique (element th) ou des 
informations de donnees (element TD). 

L'element TABLE possede trois attributs, border, frame et 
rules, qui indiquent a 1' agent utilisateur les bordures et les 
regies a restituer. 

L'element CAPTION permet de doter le tableau d'une legende. II 
est egalement utile de renseigner l'attribut summary de l'element 
TABLE, au benefice des agents utilisateurs non visuels. 

Les attributs cellspacing et cellpadding permettent de 
modifier respectivement l'espacement entre les cellules, ainsi que 
le decalage entre le contenu de la cellule et la bordure. 

L'alignement horizontal d'un tableau s'effectue a l'aide de 
l'attribut align et l'alignement vertical grace a l'attribut 
valign. La largeur est controlee par l'attribut width. Elle peut 
etre exprimee de facon fixe, en pourcentage ou 
proportionnellement. 

II est possible de fusionner des cellules d'une meme ligne a l'aide 
de l'attribut colspan et d'une meme colonne a l'aide de l'attribut 
rowspan. Ces deux attributs peuvent etre combines. 

Vous regroupez structurellement des lignes a l'aide d' elements 
d'en-tete de tableau (thead), de corps de tableau (tbody) et de 
pied de tableau (TFOOT). 

Vous regroupez structurellement des colonnes a l'aide d'elements 
COLGROUP et definissez des attributs partages a l'aide d'elements 
COL. L'attribut span specifie l'etendue d'un regroupement. 

II est possible d'imbriquer des tableaux. 

C'est avec les tableaux qu'il est possible de constater les 
differences de restitution les plus importantes entre navigateurs. 
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HTML propose de nombreuses autres possibilites de mise en forme des 
pages ou de portions de texte, a l'aide d' elements de type bloc ou de 
type ligne. Tous repondent a des besoins precis, et peuvent etre 
employes de diverses facons, par exemple soit a la place de l'element de 
paragraphe normal p, soit en combinaison avec celui-ci. 



Elements etudies dans ce chapitre : 



HP. 

<! — — > 

DIV, SPAN 

PRE, TT 

BLOCQUOTE, Q 

CITE 

ABBR, ACRONYM 

EM, STRONG 

OBJECT 

CODE, SMP, KBD 



5.1 . Principaux elements structuraux 



Element HR 

Cet element bloc est probablement le plus curieux de cette serie, car il 
s'agit d'un element vide depourvu de balise de fermeture, dont le seul 
role est d'inserer une ligne horizontale a l'ecran. Placez-le apres les 
titres principaux et les changements de section. Une telle barre 
horizontale constitue une preuve manifeste de changement de sujet. 

1 Ouvrez le Bloc-Notes, puis le fichier pageacd _4_1 .html. 

2 Comme d'habitude, modifiez le numero de version : 

<META name="version" content="l . 5 . 1"> 

3 Ajoutez un element HR de barre horizontale entre les titres de 
niveau 1 et de niveau 2 : 

<H1 align=" center ">Ma page d' accueil</Hl> 
<HR> 

<H2 align="center">Bienvenue sur mon site.</H2> 

4 Ajoutez egalement un element HR juste avant la balise de 
fermeture de l'element BODY. 

<HR> 

</BODY> 
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5 Enregistrez votre fichier sous le nom pageacd _5_1 .html, puis 
examinez-le dans votre navigateur. 

La page affiche desormais deux barres horizontales. 



tUJI.II.IJ.J.]]ll]ll«BIPIHBWM JOJ 



Fichier Edition Affichage A[ler a Marque-pages Outils ? © 



Ma page d'accueil 



Bienvenue sur mon site. 

Vous lyowerez sur ^e site cies informations : 



sur ma region ; 
sur ma fatniHe ; 
sui" mes 



Figure 5. 1 : 

Barres horizontales dans la page 
d'accueil 



XHTML 

REWMUE „ „ TTrT7n>IT ,., . , , ,,, . 

En XHTML, comme pour tout element vide, vous devez l ecnre 

<hr />. 



Commentaire HTML 

Autre bloc particulier, le cas ou vous souhaitez inserer un commentaire 
non lu par le navigateur, et done non affiche dans la fenetre de celui-ci. 

<!-- commentaire --> 

ou commentaire est le texte du commentaire. Ce texte peut occuper 
plusieurs lignes. Les commentaires sont frequemment saisis en 
majuscules arm de faciliter leur identification dans le code. 

Prenons un exemple concret : vous possedez un en-tete ou un pied de 
page commun a toutes vos pages Web et savez que vous allez devoir 
regulierement le modifier. Vous pouvez en faciliter grandement la 
recherche en inserant juste avant un commentaire comme : 

<!-- DEBUT DU PIED DE PAGE --> 
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Les commentaires sont precieux lorsqu'un site Web est developpe en 
collaboration, pour expliquer certains ensembles de code ou simplement 
pour servir d' aide-memoire ou de lignes directrices en vue 
d ' ameliorations ulterieures . 

1 Revenez au fichier pageacd _5_1 .html actuellement ouvert dans le 
Bloc-Notes. 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 .2"> 

3 Ajoutez un element de commentaire juste apres le titre de niveau 2 : 

<H2 align="center">Bienvenue sur mon site.</H2> 
<!-- Contenu a etoffer, probablement a l'aide d'une 
barre de navigation. 

Remarque importante : ne pas oublier de modifier les 
liens tant de la page d' accueil que des pages 
secondaires en cas de modification des noms de 
fichier ! --> 

4 Ajoutez un autre commentaire juste avant la balise de fermeture 
de l'element body. 

<HR> 

<!-- Des remarques legales ne seraient pas 

super flues --> 

</BODY> 

Remarquez que le premier commentaire s'etend sur plusieurs 
lignes, contrairement au second. 

5 Enregistrez votre fichier sous le nom pageacd _5_2.html, puis 
examinez-le dans votre navigateur : 1' aspect est strictement 
identique a la page precedente, puisque les commentaires sont 
ignores par 1' agent utilisateur. 



F***« E*wn tfWww Afer4 »*rque pros 



Mil pilge d'luoin'il 



Bienvenus sur mon site. 

v^iw ttiMiTerei nree Ae del irfiimnuonj 



&.™-=. n ,' 



Figure 5.2 : 

Les commentaires n'apparaissent 
pas dans la fenetre du navigateur 
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Couples de traits d'union 

Les espaces vierges sont interdits entre le delimiteur d'ouverture de la 
declaration de balisage < ! et le delimiteur d'ouverture de commentaire 
— , mais autorises entre le delimiteur de fin de commentaire — et le 
delimiteur de fin de declaration de balisage >. Une erreur classique 
consiste a inclure une chaine de traits d'union a l'interieur d'un 
commentaire. Prenez garde a ne pas inserer une suite de deux traits 
d'unions adjacents ou plus a l'interieur d'un commentaire : l'agent 
utilisateur l'interpreterait comme la fin du commentaire ! 



Les commentaires se revelent egalement precieux justement en raison de 
leur capacite a ne pas etre interpreted par l'agent utilisateur : lorsque 
vous testez le code d'une nouvelle page et rencontrez une erreur, il est 
parfois utile de mettre en commentaire une portion du code, qui sera ainsi 
ignoree par le navigateur. II peut s'agir d'une portion dont vous savez 
qu'elle fonctionne correctement ou au contraire d'une partie de posant 
probleme. Prenons un exemple. 

1 Revenez au fichier pageacd _5_2.html actuellement ouvert dans le 
Bloc-Notes. 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 .3"> 

3 Declarez comme commentaire le paragraphe d'envoi de courriel : 

<!-- 

<P align="center"> 

<A href="mailto : votre_nom@votre_FAI">Ecrivez-moi !</A> 

</P> 

— > 

4 Enregistrez votre fichier sous le nom pageacd _5_3.html, puis 
examinez-le dans votre navigateur : l'ancre permettant l'envoi 
d'un courriel a votre adresse n'apparait plus dans la fenetre (voir 
Figure 5.3). 

Cette technique est extremement interessante : pensez par exemple a un 
tableau s'affichant d'une facon qui ne correspond pas a votre attente. 
Placez en commentaire tous les elements TR, puis sortez-les un a un du 
commentaire en deplacant la balise < ! — jusqu'a identifier celui qui pose 
probleme ! 
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Fichier Edition Affichage A|ler a Marque-pages Out ils ? 



<£ ' SJ ' * $ O © |U fl«:///S:/lJ © 01! [H~ 

Ma page d'accueil 



Bienvenue sur mon site. 

'v r ous trouverez jut ce jiie des informations 

♦ sur ma 

♦ sur ma famiHe ; 

♦ sur tries : 



Figure 5.3 : 

La ligne d'envoi de 
courriel napparalt 
plus sur la page : le 
code place en 
commentaire est 
ignore. 



Elements DIV et SPAIN! 

Les elements DIV et SPAN, employes avec leurs attributs id et class, 
offrent un mecanisme generique qui rajoute de la structure aux 
documents. L'element DIV est un element bloc, tandis que SPAN est un 
element ligne. Impliques uniquement dans un but structurel, ils 
n'imposent en eux-memes aucune presentation particuliere du contenu. 
Ils sont essentiellement employes avec les feuilles de style et/ou 
l'attribut lang pour mieux exploiter HTML. 

Prenons un exemple concret. Souvenez-vous que, lors de l'etude des 
en-tetes, corps et pieds de tableaux (THEAD, TBODY et TFOOT), nous 
avions suppose que l'une de vos passions concernait la litterature de 
science-fiction. Vous aviez (theoriquement) concu un tableau presentant 
differents ouvrages. HTML ne disposant pas d'element identinant des 
objets comme « SF classique », « Heroic fantasy », etc., les elements 
DIV et SPAN permettent d'obtenir les effets de structure et de 
presentation souhaites. Voici comment vous pourriez vous en servir : 

<TBODY> 

<DIV id="Classique" class="typeSF"> 

<TR> 

<TH colspan="3"> 

<SPAN class="SFclassique">Auteurs "classiques" SF</SPAN> 

</TH> 
</TR> 
. . .autre contenu. . . 
</DIV> 
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</TBODY> 
<TBODY> 

<DIV id="Heroic" class="typeSF"> 
<TR> 

<TH colspan="3"> 

<SPAN class="heroic">Auteurs "heroic-fantasy"</SPAN> 
</TH> 
</TR> 
. . .autre contenu. . . 

</DIV> 
</TBODY> 

Vous avez defini des blocs a presentation particuliere, lies au style 
attribue a la classe typeSF, et des elements ligne egalement a 
presentation particuliere, lies aux classes Sfclassique et heroic. 

Observee dans un navigateur, cette page ne presente aucune difference 
avec la version precedente (reportez-vous a la figure de la page 134), 
puisque vous n'avez pas encore defini ces classes de feuilles de style. 
Vous verrez plus en detail dans le Chapitre 8, traitant des feuilles de 
style, comment exploiter ces structures. 

Element PRE 

L'element PRE est tres interessant en ce qu'il definit un bloc de texte 
comme preformate. Les agents utilisateurs visuels (les navigateurs) 
gerent comme suit le contenu d'un element PRE : 

lis peuvent respecter les espaces vierges presents dans le texte. 

lis peuvent afficher le texte a l'aide d'une police a espacement 
non proportionnel. 

lis peuvent desactiver le retour a la ligne automatique. 

lis ne doivent pas desactiver le traitement bidirectionnel. 

Remarquez bien que les navigateurs ne sont done pas tenus de respecter 
absolument les espaces vierges presents dans le contenu d'un element 

PRE. 

Pour examiner un exemple, supposons que parmi vos passions figure 
egalement Shakespeare et, plus particulierement parmi les ceuvres de cet 
eminent auteur, Hamlet. Une de vos pages contient un extrait de cette 
piece : vous souhaitez respecter exactement la mise en forme de 1' auteur. 
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1 Plutot que de creer dans le Bloc-Notes un nouveau fichier, 
repartez du fichier precedent (en principe pageacd _5_2.html) en 
supprimant tout le contenu de l'element BODY. Cela evite d'avoir 
a saisir de nouveau tous les elements communs. 

2 Dans l'element HEAD, modifiez l'element TITLE : 

<TITLE>"Hamlet de Shakespeare"</TITLE> 

3 Puis modifiez le numero de version : 

<META name="version" content="l . 5 . 1"> 

4 Ajoutez un nouveau titre de niveau 1 dans l'element BODY : 

<H1 align="center">Extrait de Hamlet de Shakespeare</Hl> 

5 Ajouter ensuite une barre horizontale, puis un paragraphe : 

<HR> 

<P>Ceci est un de mes extraits favoris : un petit air un 
peu coquin chante par Ophelia a ses parents</P>. 

6 Creez ensuite un element PRE et placez-y son contenu, puis 
faites-le suivre d'une autre barre horizontale : 

<PRE> 

Alors, il se leva et mit ses habits, 

Et ouvrit la porte de sa chambre ; 
Et vierge elle y entra, et puis oncques vierge 

Elle n'en sortit. 
</PRE> 
<HR> 

7 Enregistrez votre fichier sous le nom hamlet1_5_1.html, puis 
examinez-le dans votre navigateur : 1' aspect du texte est 
strictement respecte par 1' agent utilisateur. 
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Figure 5.4 ; 

Aspect d'un element PRE 
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L'element PRE possede un element ligne analogue, TT. 



Elements BLOCKQUOTE et Q 

Nous venons de placer sur une page Web un extrait de texte celebre : il 
est normalement legalement obligatoire de citer les sources de cette 
oeuvre. II est frequent de devoir placer sur une page Web des citations. 
Une citation peut emaner d'un avis reconnu pour souligner l'interet d'un 
produit, peut indiquer une source d' information ou representer des notes 
de lecture. Elle peut aussi simplement etre une de vos citations favorites, 
affichee quelque part sur votre page Web. 

Quel que soit le motif de sa presence, une citation se doit de respecter un 
style bien defini pour apparaitre de facon satisfaisante sur tous les 
navigateurs. Tel est le but de l'element BLOCKQUOTE, un element de 
type bloc, dont l'equivalent en type ligne est l'element Q. Les agents 
utilisateurs visuels restituent en general l'element BLOCKQUOTE sous la 
forme d'un bloc de texte en re trait. Voici la syntaxe des elements 
BLOCKQUOTE et Q : 

<BLOCKQUOTE [lang=" code_langue" ] [cite=" URI_source" ] > 
<Q [ lang=" code_langue" ] [ cite = " URI_source" ] > 

1 Revenez au fichier precedent, et modifiez le numero de version : 

<META name="version" content="l . 5 . 2"> 

2 Encadrez l'element PRE par un element BLOCKQUOTE : 

<BLOCKQUOTE> 

<PRE> 

. . . texte . . . 

</PRE> 

</BLOCKQUOTE> 

3 Enregistrez votre fichier sous le nom hamlet1_5_2.html, puis 
examinez-le dans votre navigateur. La difference est faible par 
rapport a la figure precedente, mais le leger retrait attendu est bien 
present (voir Figure 5.5). 

L'attribut facultatif cite de l'element BLOCKQUOTE permet de specifier 
l'URI du document source (si celui-ci est disponible sur le Web). Mieux 
vaut toutefois employer l'element CITE pour indiquer la source de la 
citation. Cet element apparait sur une ligne individuelle, le plus souvent 
en italique. 

4 Revenez a votre fichier, puis ajoutez sous l'element BLOCKQUOTE 
l'element suivant : 
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Extrait de Hamlet tie 
Shakespeare 



Ceci est. un ds mes excraits f.avoris : un petit air un peu coqiiin chants par 
Ophelia a ses parents 



Aloes, il se leva et mit ses habits, 

Et ouvr it. la pocte de sa charribre ; 

Et vierge elle y entca, et puis oncques vierge 
Elle n 1 en sortit . 






Figure 5.5 : 

Aspect d'un element 
BLOCKQUOTE 
combine avec un 
element PRE 



<CITE>Hamlet, Acte IV Scene V.William Shakespeare, 
"Richard III, Romeo et Juliette, Hamlet", Trad. 
F-V Hugo. 1979, Ed. Garnier-Flammarion, 
ISBN 2-08-070006-5, page 339.</CITE> 

5 Enregistrez votre fichier sans modifier son nom, puis examinez-le 
dans votre navigateur. La source de la citation est bien indiquee 
sous la forme attendue. 
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Figure 5.6 ; 

Aspect d'un element 
BLOCKQUOTE 
combine avec un 
element PRE 
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Remarquez que vous pourriez ameliorer la mise en forme, par exemple 
en placant des sauts de ligne dans la source et/ou en employant 1' attribut 
align. Comme vous savez desormais le faire, nous vous en laissons 
1' initiative comme exercice complementaire. Le code complet de cet 
exemple est presente dans le listing suivant. 

Listing 5-1 : Code du fichier Hamlet 1.5.2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : //www . w3 . org/TR/html4 /loose . dtd"> 
<HTML> 
<HEAD> 

<TITLE>"Hamlet de Shakespeare"</TITLE> 
<META name="author" content="Fabrice Lemainque"> 
<META name="version" content="l . 5 . 2"> 
</HEAD> 
<BODY> 

<H1 align="center">Extrait de Hamlet de Shakespeare</Hl> 
<HR> 

<P>Ceci est un de mes extraits favoris : un petit air un 
peu coquin chante par Ophelia a ses parents</P>. 
<BLOCKQUOTE> 
<PRE> 
Alors, il se leva et mit ses habits, 

Et ouvrit la porte de sa chambre ; 
Et vierge elle y entra, et puis oncques vierge 
Elle n'en sortit. 
</PRE> 
</BL0CKQU0TE> 

<CITE>Hamlet, Acte IV Scene V. William Shakespeare, 
"Richard III, Romeo et Juliette, Hamlet", Trad. F-V Hugo. 
1979, Ed. Garnier-Flammarion, ISBN 2-08-070006-5, page 
339.</CITE> 
<HR> 
</B0DY> 
</HTML> 

Le role de 1' attribut lang, egalement facultatif, est plus subtil. Des 
citations peuvent etre imbriquees, ce qui signifie que vous pouvez 
utiliser 1' element Q a l'interieur d'un element BLOCKQUOTE. Un element 
Q peut d'ailleurs egalement etre place a l'interieur d'un autre element Q. 

La specification est toutefois un peu contradictoire en ce qui concerne le 
comportement des navigateurs vis-a-vis du contenu d'un element Q : en 
principe, celui-ci devrait etre restitue avec des marques de citation 
englobantes, si bien que les auteurs ne devraient done pas placer de 
marque de citation au debut ni a la fin du contenu d'un element Q. Les 
marques de citation employees doivent dependre de la langue, telle que 
specifiee par 1' attribut lang : en effet, le type de marque de citation, 
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exterieure ou interieure (imbriquees), depend de la langue. Ceci devrait 
etre respecte par les agents utilisateurs. 

II est recommande que les mises en ceuvre de feuilles de style 
fournissent un moyen d'ajouter des marques de citation avant et apres 
une citation encadree par l'element BLOCKQUOTE, d'une maniere 
appropriee au contexte de langue courant et au degre d' imbrication des 
citations. Mais certains auteurs employant a tort l'element BLOCKQUOTE 
pour obtenir un texte en retrait, les agents utilisateurs ne devraient 
finalement pas ajouter de marques de citation en style par defaut, arm de 
preserver les intentions de ces auteurs. 

Tout ceci n'est pas tres clair. Mieux vaut considerer un exemple. Les 
Anglo-Saxons se servent de guillemets comme marques de citation 
exterieures et d' apostrophes comme marques de citation interieures, 
tandis que les francophones privilegient des guillemets imbriques. De ce 
fait, le fragment de code suivant : 

Listing 5-2 : Citations imbriquees 

<Q lang="en-us">He shouted 

<Q lang="en-us">What are you doing here?</Qx/Q> 

<Q lang="fr">Il s'ecria 

<Q lang="fr">Que faites-vous ici ?</Qx/Q> 

devrait etre affiche comme ceci : 

"He shouted 'What are you doing here?''' 
"II s'ecria "Que faites-vous ici ?"" 

Mais comme le montrent les trois copies d'ecran des figures suivantes, 
le rendu des navigateurs, meme recents, manque pour le moins de 
coherence : 
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"He shouted 'What die you doing here? 
"H s'ecna 'Qus fsites-vfous ici f ' " 



Figure 5. 7 : 

Rendu de citations imbriquees dans le 
navigateur Firefox 2.O. 
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Fichier Edition Affichage Favoris C iy t 
Qprecedente * 



Adresse \fe*\ e^Citationsimbriquees.htm T | J OK 



He shouted What ate you doing here? 
H s'ecna Que faites-vous ici ? 



Pcisiis ds travail 



d 



Figure 5.8 : 

Rendu de citations imbriquees dans le 
navigateur Internet Explorer (B et 7). 
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"He shouled 'What are ycu doing here? '" 
"II s'ecria 'Que raites-vous ici ? '" 



Figure 5.9 : 

Rendu de citations imbriquees dans le 
navigateur Amaya. 



Mieux vaut done observer la plus grande prudence en cas d' imbrication 
de citations. La sagesse recommande d'employer de preference les entites 
caracteres HTML etudiees dans la suite de ce chapitre pour afficher 
guillemets ou apostrophes, plutot que d'imbriquer des elements Q. 

Par ailleurs, l'emploi des elements BLOCKQUOTE et Q uniquement pour 
obtenir le retrait d'un texte est deconseille : preferez le recours aux 
feuilles de style. 

Element ADDRESS 

L'element ADDRESS, generalement place au debut ou a la fin d'un 
document, sert a fournir des informations de contact applicables au 
document ou a une partie essentielle de celui-ci. Ses balises d'ouverture 
et de fermeture sont toutes deux obligatoires. 

Un exemple concret semble preferable a une longue explication. 

1 Ouvrez dans le Bloc-Notes le fichier pageacd _5_2.html (e'est en 
principe actuellement hamletl _5_2.html qui est ouvert). 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 ,4"> 

3 Entrez le dernier element HR et le dernier commentaire, et inserez 
un element ADDRESS comme suit : 
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<ADDRESS> 

<A href=" . . /0Rignal/">01ivier Rignal</A> et 

<A href=" . . /JBogue/">Justin Bogue</A> sont les 

personnes a contacter pour tout <A href="probleme"> 

probleme</A> rencontre sur le site . 

</ADDRESS> 

4 Enregistrez votre fichier sous le nom pageacd _5_4.html, puis 
examinez-le dans votre navigateur : la page propose desormais 
des informations de contact. 
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Figure 5. 10 : 

Element ADDRESS 

Remarquez que, dans cet exemple, les valeurs des attributs href sont 
toutes inexistantes : il convient de creer les destinations de lien 
adequates. 



Modification des marges d'un paragraphe 

II est parfois souhaitable ou necessaire de modifier les marges d'un bloc 
de texte (element DIV, p ou PRE). Vous pouvez y parvenir a l'aide de 
l'attribut style place a l'interieur de la balise d'ouverture de l'element 
concerne : 

<P style="margin-lef t : 10pt"> 

Cela cree une marge supplemental gauche de 10 points. Remarquez 
que la syntaxe de l'attribut style est la meme que celle de n'importe 
quel attribut HTML: attribut="valeur". II est applicable a la 
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plupart des elements HTML (reportez-vous a l'Annexe A), mais est 
desormais deconseille au profit des feuilles de style. 



« Taille en pixels 

ASTUK 

Pour calculer avec plus de precision l'importance d'une taille 
exprimee en pixels, utilisez la formule suivante : 

Taille reelle = valeur x (largeur de l'ecran)/(resolution horizontale de I'ecran) 

En supposant que vous possediez un ecran de 17' mesurant (environ) 
34 cm de large et employe avec une resolution de 1280 x 1024 (done 
1280 pixels de resolution horizontale), une valeur de 10 pixels correspond 
a : 

10 x 34/1280 = 0,266 centimetres soit 2,7 mm 

La chose est plus delicate pour les mesures exprimees en points : si sur un 
Mac, la regie est « un point = un pixel », sur un PC, le reglage par defaut 
est « un point = 4/3 pixel ». 

C'est la raison pour laquelle certains auteurs ecrivent que le Mac a une 
dpi de 72 et le PC une dpi de 96. Tout depend de la definition du « dot » 
de dpi (pixel ou point). 

Puisque nous parlons essentiellement de PC, une valeur de 10 points 
correspond a environ 3,5 mm. 



5.2. Elements de structuration du texte 

HTML propose un certain nombre d' elements de type ligne permettant 
de caracteriser precisement une partie de texte. Ces elements sont 
presentes dans le tableau de la page 155. 

Gardez bien present a l'esprit que le but de ces elements est avant tout 
de contribuer a la structure du texte, non d'obtenir une presentation 
particuliere. 

Elements EM et STRONG 

Les elements EM (EMphasis, emphase) et STRONG (fort) s'utilisent pour 
mettre en exergue une portion du texte qui possede, par exemple, une 
signification particuliere dans un contexte donne. 

La presentation des elements de phrase depend de 1' agent utilisateur. En 
general, les agents utilisateurs visuels presentent le texte de l'element EM 
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en italique et celui de l'element STRONG en gras. Les agents utilisateurs 
vocaux, eux, devraient changer les parametres de la synthese vocale tels 
que le volume, la hauteur ou le timbre. 

1 Revenez au le fichier pageacd _5_4.html, en principe celui 
actuellement ouvert dans le Bloc-Notes. 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 .5"> 

3 Modifiez comme suit le titre de niveau 2 : 

<H2 align="center">Bienvenue sur <EM>mon</EM> site.</H2> 

4 Modifiez comme suit le contenu du premier element p : 

<P>Vous trouverez sur ce site des <STRONG>inf ormations 
</STRONG> :</P> 

5 Enregistrez votre flchier sous le nom pageacd _5_5.html, puis 
examinez-le dans votre navigateur : le mot « mon » apparait en 
italique, le mot « informations » en gras. 
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Figure 5.11 : 

Elements EM et STRONG 



Vous avez pu rencontrer d'autres elements qui permettent de placer une 
partie de texte en italique (element I) ou en gras (element b). Ces 
elements, sur lesquels nous reviendrons, modifient 1' aspect de la police, 
mais ne possedent aucun role structurel. Autrement dit, un mot place en 
gras ou en italique par G ou I attire visuellement 1' attention, ce qui lui 
confere une importance particuliere, alors qu'inversement EM et STRONG 
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attribuent structurellement une importance particuliere a ce mot, qui se 
trouve de ce fait affiche visuellement en italique ou en gras. 

Comme cela a deja ete largement souligne, tous les effets 
« cosmetiques » appliques a la presentation gagnent largement a etre du 
ressort exclusif des feuilles de style. 

Elements ABBR et ACRONYM 

Les elements ABBR et ACRONYM permettent aux auteurs d'indiquer 
clairement les occurrences des abreviations et des acronymes. Les 
langues occidentales raffolent en effet des sigles comme RATP, ONU ou 
bit, ainsi que des abreviations comme Mme, SA ou etc. Le chinois et le 
japonais emploient tous deux des mecanismes d'abreviation analogues, 
selon lesquels un nom long est designe par la suite par un sous-ensemble 
des caracteres Han qui le constituent. Le balisage de ces structures 
fournit une aide precieuse aux agents utilisateurs et aux outils tels que 
les verificateurs d'orthographe, les synthetiseurs de parole, les systemes 
de traduction automatique et les moteurs de recherche. 

Le contenu des elements ABBR et ACRONYM specifie l'expression abregee 
telle qu'elle apparaitrait normalement dans le cours du texte. L'attribut 
title de ces elements peut servir a procurer la forme complete ou 
developpee de l'expression. 

Voici quelques exemples d'utilisation des elements ACRONYM et ABBR : 

Listing 5-3 : Elements ABBR et ACRONYM 

<p> 

<ABBR title="World Wide Web">WWW</ABBR> 
<ACRONYM lang="fr" 

title="Regie Autonome des Transports Parisiens"> 
RATP 
</ACRONYM> 

<ABBR lang="es" title="Dona">Dofia</ABBR> 
<ABBR lang="en" title="Abbreviation">abbr . </ABBR> 
</P> 

Voici 1' aspect de ce fragment de code dans un navigateur. Remarquez ce 
qui se passe lorsque le pointeur est place sur un element (voir 
Figure 5.12). 

Abreviations et acronymes possedent souvent une prononciation 
idiosyncrasique. Par exemple, si CEE et FAI se prononcent typiquement 
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lettre a lettre, Ram et Medef se prononcent phonetiquement. En outre, 
certains termes (comme URI) sont epeles par les uns et prononces 
comme des mots par les autres. En cas de necessite, les auteurs devront 
utiliser les feuilles de style pour specifier la prononciation d'une forme 
abregee. 
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Figure 5. 12 : 

Elements ABBR et ACRONYM 



Elements CODE, SMP et KBD 

Internet possede, de par ses origines militaires et universitaires, une 
lourde orientation scientifique et technologique. II etait done logique que 
HTML propose un element structurel speciflque a l'affichage de code, 
l'element CODE. 

Au sens le plus large, le terme « code » decrit les elements et la syntaxe 
permettant a une machine de lire un programme ou un fichier. En 
redigeant de l'HTML, vous ecrivez du code, meme si celui-ci differe 
largement de celui d'un programme ecrit dans un autre langage, comme 
C ou PHR Tout code doit respecter scrupuleusement une syntaxe 
specifique au langage concerne. Traditionnellement (et comme e'est le 
cas dans cet ouvrage) du code est le plus souvent affiche sous forme de 
texte avec une police non proportionnelle. C'est une methode 
universelle qui signale qu'il s'agit de quelque chose destinee a la 
machine. Lorsqu'il est lu par un agent utilisateur visuel, comme un 
navigateur, le texte figurant dans l'element CODE devrait egalement etre 
affiche a l'aide d'une police non proportionnelle. Certains navigateurs 
etant regies arm d'afficher le contenu de l'element CODE d'une facon 
particuliere, mieux vaut le reserver aux exemples de code que vous 
souhaitez presenter sur le Web. 
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Voici un exemple de code, tire de l'excellent ouvrage La Bible C++ de C. 
Horstmann et T. Budd (Ed. Micro Application, 2004, ISBN 2-7429- 
3717-x). 



Listing 5-4 : Exemple de I'element CODE 

<P>Fichier temps 1 . cpp</P> 

<HR> 

<PXCODE> 

1 #include Sit; iostream><BR> 

2 <BR> 

3 using namespace std; <BR> 

4 <BR> 

5 #include "ccc_time. h"<BR> 

6 <BR> 

7 int main()<BR> 

8 { <BR> 
Time reveil(7, 0, 0, 0); <BR> 

reveil .add_seconds (1000) ; /* mille secondes plus tard */<BR> 
cout Sit; Sit; reveil . get_hours () <BR> 

Sit; Sit; ":" << reveil . get_minutes () <BR> 
Sit; Sit; ":" slt;slt; reveil. get_seconds () slt;slt; "\n";<BR> 
<BR> 

return 0; <BR> 



9 

10 

:: 

12 
13 
14 

15 
16 
</ CODEX/ P> 



Voici 1' aspect de ce code dans un navigateur. 
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Exemple de code C++ 
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I ^include < iostresm> 
2 

3 using namespace std; 

4 

5 Smclude "ccc tinie.h" 

6 

7 int. maln[] 

S { 

9 Time reveil (7, 0, 0, 0); 

10 reveil. add seconds ( 1O00) ; /* mille secondes plus tard */ 

II cout « reveil. get hours () 

12 « ":" « reveil. gee minutes () 

13 « ":" « reveil. get seconds () « : '\n"; 
13 

15 return O; 

16 } 












I t™ 





Figure 5. 13 : 

Mise en ceuvre de 
i'element CODE 



LE GUIDE COMPLET 153 



Mise en forme avancee 



A 



Caracteres speciaux 

En examinant le code ci-dessus, vous devriez etre intrigue par les 
mysterieux sit;. Plusieurs caracteres sont des composants 
fondamentaux de la syntaxe HTML : en particulier les symboles <> qui 
constituent une balise. II est done impossible d' employer ces symboles 
en HTML sans que 1' agent utilisateur ne tente de lire la balise placee a 
l'interieur. Pour pallier cela, une notation particuliere existe, nominee 
reference de caractere. Ce sujet sera aborde un peu plus loin dans ce 
chapitre. 



L' element CODE est de type ligne. Employez-le avec un element de 
paragraphe, comme P ou PRE, pour afficher un bloc de code. Comme il 
s'agit d'un element de structure significatif, ne placez que du code dans 
un element CODE. Si vous souhaitez afficher du texte avec le meme 
aspect, preferez l'element bloc PRE ou l'element ligne TT : tous deux 
affichent en principe un texte dans une police non proportionnelle. 

L'element SMP, tres proche de l'element CODE, sert a signaler une sortie 
de programme. En reprenant l'exemple precedant et en ajoutant a la fin, 
apres la balise de fermeture de l'element P : 

<P>Ce programme affiche :</P> 
<PXSMP>7 : 16 : 40</SMP></P> 

le navigateur affiche : 
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a(] 



{ 



9 Time reveil(7, 0, 0, 0); 

10 L-eveil.add_seconds (1000) ; / * inille seconles plus tard */ 

11 cout. << ceveil.get_hours () 

12 « ":" « ceveil.gec_niinutes () 

13 << ":" « ceveil.get_seconds (] « "\n' r ; 



i Q; 



1^ 

15 re 

16 } 

Ce prolamine afSche : 
7:16.40 



Figure 5. 14 ; 

Mise en oeuvre des 
elements CODE et 
SMP 
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L'element KBD est tres similaire : il sert a signaler un texte, ou une 
expression, devant etre saisi par l'utilisateur au clavier. 



Autres elements structuraux 

L'element CITE a deja ete aborde lors de l'etude des elements 
BLOCKQUOTE et Q. II permet de fournir la source d'une citation et est 
generalement a preferer a l'attribut cite des elements BLOCKQUOTE et Q. 

Les autres elements, DFN et VAR, sont plus rarement mis en ceuvre. 

Le tableau suivant presente tous ces elements structuraux ainsi que leur 
signification. 



Tableau 5. 1 ; Elements de structuration du texte 


Element 


Description 


EM 


Indique une 


mise en emphase. 




STRONG 


Indique une 


emphase plus forte. 




CITE 


Contient un 


extrait ou une reference vers une autre source. 


DFN 
CODE 


Indique qu'il 


s'agit de I'instance definissante du terme englobe. 


Designe un 


fragment de code informatique. 




SAMP 


Designe un 
etc. 


exemple des sorties d'un programme, d'un 


script, 


KBD 


Indique un texte que doit saisir l'utilisateur. 


VAR 


Indique I'instance d'une variable ou le parametre d'un 
programme. 


ABBR 


Indique une 
etc.). 


forme abregee [par exemple www, HTTP, i 


. e . , 


ACRONYM 


Indique un acronyme (par exemple, radar, Lan, etc.). 





Element OBJECT 

Les versions anterieures de HTML permettaient aux auteurs d'inclure 
des images (grace a l'element IMG) et des applets (grace a l'element 
APPLET). Ces elements souffraient de plusieurs contraintes, dont la 



LE GUIDE COMPLET 155 



Mise en forme avancee 



principale etait probablement l'incapacite a inclure les types de medias 
nouveaux et a venir. 

HTML 4 a done introduit l'element OBJECT, qui offre une solution 
generale aux inclusions d'objets generiques. Cet element permet la 
specification de tout ce dont a besoin l'objet pour sa presentation par un 
agent utilisateur : le code source, les valeurs initiales et les donnees 
d'execution. Dans cette specification, le terme « objet » designe les 
contenus places dans des documents HTML (applets, modules 
complementaires ou plug-ins, gestionnaires de medias, etc.). 

Ce nouvel element OBJECT prend ainsi en charge quelques-unes des 
taches effectuees par les elements existants. II remplace notamment les 
elements specifiques IMG (image), APPLET (applet) et I FRAME (autre 
document HTML). 

Chacun de ces trois types d'inclusion possede ainsi une solution 
specifique et une solution generique. L'element generique OBJECT 
servira de solution pour 1' implementation des types de medias futurs. 

Nous examinerons plus en detail cet element lors de l'examen des 
solutions specifiques d'inclusion, mais il meritait d'etre cite des a 
present. 

5.3. Caracteres speciaux et encodage 
de caracteres 

Si vos pages Web sont exclusivement destinees a un public occidental et 
sont redigees uniquement en anglais, vous ne devriez guere rencontrer 
de problemes de caracteres, sauf pour l'affichage des caracteres HTML 
reserves, qui pourraient etre presents dans du texte : les reglages par 
defaut sont parfaits. 

En revanche, si vous devez placer sur tout ou partie d'une page du texte 
en russe, hebreu ou chinois, ou meme simplement en francais, vous 
devez savoir comment employer les caracteres speciaux et les jeux de 
caracteres. 
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Les jeux de caracteres, egalement nommes encodages de caracteres 
couramment utilises sur le Web comprennent ISO-8859-1 (appele aussi 
Latin-1, utilisable pour la plupart des langues d'Europe de l'Ouest), 
ISO-8859-5 (qui gere le cyrillique), SHIFT_JIS (un encodage du 
japonais), EUC-JP (un autre encodage du japonais) et UTF-8 (un 
encodage ISO 10646 qui a recours a un nombre different d' octets pour 
differents caracteres). Les noms des jeux de caracteres sont insensibles a 
la casse : SHIFT_JIS, Shift_JIS, et shift_jis sont equivalents. 

La specification HTML 4.0.1 n'indique pas quels encodages de 
caracteres doit reconnaitre 1' agent utilisateur. 

Pour reconnaitre l'encodage de caracteres employe, le moyen le plus 
simple consiste a employer le parametre char set dans le champ 
Content-Type de l'en-tete du protocole HTTP. Ce protocole 
mentionne ISO-8859-1 comme encodage par defaut lorsque le parametre 
charset est absent du champ Content-Type de l'en-tete. Cette 
recommandation s'est toutefois revelee inutile : certains serveurs ne 
permettent pas d'envoyer un parametre charset et d'autres peuvent ne 
pas etre configures pour l'envoyer. Les agents utilisateurs ne doivent 
done pas supposer une valeur par defaut pour le parametre charset. 

Pour eviter tout probleme, les documents HTML peuvent (et devraient) 
comporter des informations explicites sur l'encodage de caracteres du 
document, fournies a l'agent utilisateur a l'aide d'un element META. 

Ainsi, pour specifier comme encodage de caracteres du document 
EUC-JP, le document devrait inclure la declaration META suivante : 

<META http-equiv="Content-Type" COntent=" text /html; 

charset=EUC-JP"> 

La declaration META doit seulement etre utilisee lorsque l'encodage est 
organise de telle sorte que les octets en valeurs ASCII represented des 
caracteres ASCII (au moins jusqu'a l'analyse de l'element META). Les 
declarations META devraient done apparaitre le plus tot possible dans 
l'element HEAD. 

C'est ce que respecte par exemple Microsoft (ainsi que de nombreux 
autres sites) en l'indiquant explicitement a l'aide d'un element META 
place au debut du code source. 
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I ■'sj^ ' •—>. http^/www.microsoft.ccm/f ranee/ 



"3 a ok [a 



Microsoft 



Recherther sjr Mkresoft Fran. 



Business so 
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Internet 






Mobility 






Macintosh 






■ ■ ■ ■ 






Jeux axbon 




MSH 




Tous lea pro 


jit? 




Resources 
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Microsoft Microsoft Mobile & Embedded 

Developper Conference 

Mobile & Embedded 8 J uin 2005- Paris La Defense 

OevCon 2005 CIiquezici$ Nouveau Service i 




T.tahatgsmsnt 



Retoucher partaqejj archiu 



' 
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Figure 5.15 : Page d'accueil du site Microsoft France 
(www. microsoft, com /f ranee/) 



Fichier Edition Affichage 



■JQ|x| 



£j 



<HTML> 

<HEAD> 

<META HTTP-EQUIV="Content-Type" CONTEHT="text/html; Glaarset=iso-8B59-l" /> 

-iTITLEMlicrosoft France</TITLE> 

<META http-ecpiiv="PICS-Label" content=" [PICS-1 . 1 " http://trwtr.rsac. org/ratingsvOl . Ltrnls 

1 gen true r (n s v 1 0) ] " /> 

<META HflME="KEYIiIORDS" CONTEHT="procluits; titres; telechargements; informations; site weta; 

nouveautes; solutions; services; logiciels; jeux;" /> 

<META HflME= "DESCRIPTION" COHTENT="Page d'accueil clu site Web Microsoft France: cles logiciel 

solutions pour entreprises, clu support, et des informations Microsoft." /> 

<META MflME= "115. LOCALE" COHTENT= ,r FR-FR" /> 

<META MflME= "CATEGORY" CONTEHT="home page" /> 

<STYLE TYPE="text/css"> 



J 



Figure 5. 16 : Debut du code source de la page d'accueil du site Microsoft 
France 



L'element META employe par Microsoft est le suivant : 



<META HTTP-EQUIV="Content-Type' 
charset=iso-8859-l" /> 



C0NTENT= "text /html ; 



Remarquez tout d'abord qu'il est au format XHTML, comme l'indique 
sa fermeture />. Cet element indique que le contenu est de type HTML 
et que le jeu de caracteres employe est ISO-8859-1, le jeu de caracteres 
du monde occidental. Employer cet element etant une bonne habitude a 
prendre, faites-le immediatement pour la page d'accueil de votre site. 

1 Ouvrez dans le Bloc-Notes le fichier pageacd _5_5.html, en 
principe celui actuellement ouvert dans le Bloc-Notes. 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 . 6"> 
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3 Ajoutez, juste apres l'element TITLE, un nouvel element META : 

<META HTTP-EQUIV="Content-Type" CONTENT=" text/html; 
charset=iso-8859-l"> 

4 Enregistrez votre fichier sous le nom pageacd _5_6.html. 

Si votre page emploie un jeu de caracteres different, vous pouvez 
specifier une autre valeur pour l'attribut charset. Cet attribut peut 
concerner toute la page ou s'appliquer uniquement a un element (par 
exemple, pour une citation). 



Caracteres speciaux 

Un encodage de caracteres donne peut ne pas pouvoir exprimer tous les 
caracteres du jeu de caracteres du document. Avec de tels encodages, ou 
lorsque les configurations materielles ou logicielles ne permettent pas 
aux utilisateurs d'entrer directement certains caracteres speciaux, les 
auteurs peuvent avoir recours aux references de caracteres SGML. II 
s'agit d'un mecanisme independant de l'encodage, utilise pour ajouter 
n'importe quel caractere issu du jeu de caracteres du document. 

Les references de caracteres en HTML peuvent se presenter sous deux 
formes : 

Les references de caracteres numeriques (decimales ou 
hexadecimales). 

Les references d'entites de caracteres. 

Les references de caracteres numeriques specifient la position du code 
d'un caractere dans le jeu de caracteres du document. Elles peuvent etre 
exprimees : 

Sous forme decimale, &#D;, ou D represente un nombre decimal 
qui se rapporte au numero de caractere D decimal ISO 10646. 

Sous forme hexadecimale, &#xH; ou &#XH;, ou H represente un 
nombre hexadecimal qui se rapporte au numero de caractere H 
hexadecimal ISO 10646. 

Les nombres hexadecimaux dans les references de caracteres 
numeriques sont insensibles a la casse. II est recommande de preferer la 
forme hexadecimale a la forme decimale, car c'est la forme employee 
pour les normes des jeux de caracteres. 
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Les entites de caracteres represented un moyen plus intuitif pour les 
auteurs d'appeler les caracteres du jeu de caracteres du document. Elles 
ont recours a des noms symboliques, qui evitent aux auteurs d' avoir a se 
rememorer les positions des codes. Par exemple, la reference d'entite de 
caractere sagrave; se rapporte a la lettre « a ». II est plus facile de se 
souvenir de sagrave; que de à ou de &#xeO;. 

HTML 4 ne definit pas de reference d'entite de caractere pour chacun 
des caracteres du jeu de caracteres du document. En outre, les references 
d'entites de caracteres sont sensibles a la casse. Ainsi, À (A) ne 
se rapporte pas au meme caractere que sagrave; (a). 

Quatre references d'entites de caracteres meritent une attention 
particuliere : elles sont frequemment utilisees pour masquer certains 
caracteres speciaux dans le code HTML. 

< represente le caractere < 
egt; represente le caractere > 
& represente le caractere & 
" represente le caractere " 

Vous comprenez desormais l'origine des caracteres « bizarres » que 
vous avez rencontres dans le passe. Vous pourriez cependant vous poser 
la question de l'interet reel de ces references de caracteres : si elles 
paraissent effectivement indispensables pour les caracteres reserves de 
HTML, comme < et >, nous avons jusque-la largement employe, dans 
les pages, du texte comportant des caracteres accentues sans que cela ne 
semble poser le moindre probleme. 

La restitution des caracteres accentues presents tels quels dans le texte 
depend en realite tant de 1' agent utilisateur employe que de la 
configuration de la machine utilisee, et notamment des polices installees 
sur celle-ci. Par securite, l'emploi des references de caracteres est done 
hautement recommande. 

La majorite des editeurs HTML transforment automatiquement ces 
caracteres en references, vous evitant d' avoir a les saisir manuellement : 
ainsi, Liste ordonnee devient Liste ordonna#xe9;e, mais vous 
pourriez aussi bien ecrire Liste ordonnée ou Liste 
ordonné e. Si vous preferez vous en tenir a un editeur de type 
texte, vous devrez en tenir compte et « vous habituer à 
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écrire vos textes en tenant compte des caractères 
accentu&eacutes;s ». Rassurez-vous, 1' habitude vient en fait assez vite. 

1 Ouvrez dans le Bloc-Notes le fichier pageacd _5_6.html (en 
principe celui actuellement ouvert dans le Bloc-Notes). 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 5 . 7"> 

3 Remplacez tous les caracteres accentues du texte par leurs 
equivalents references de caracteres : 

<LI>sur ma <A href="region . html">rSeacute;gion</A> ;</LI> 

<ADDRESS> 

<A href=" . . /0Rignal/">01ivier Rignal</A> et 

<A href=" . . / JBogue/">Justin Bogue</A> sont les personnes 

Sagrave contacter pour tout <A href="probleme"> 

problSegrave;me</A> rencontrSeacute; sur le site. 

</ADDRESS> 

4 Enregistrez votre fichier sous le nom pageacd _5_7.html. 

Examinez cette page dans votre navigateur : vous ne devriez constater 
aucune difference avec la version precedente. 



i»mj-J.J- 



Fichier Edition Affichage A[ler a Marque-page? OijtHs 



<? • <■> 



© {u~3 @ « [ET 



Ma page d'accueil 



■ sur osa ■;;■■■ , 

■ sur ma famille ; 

■ sur mes : : 



Ecnvez-rnoi !. 



iBJiiJ 



Bienvenue sur moit site. 

Vous trouverez 3ur ce site des informations 



si. : sont 

pour tout 1/ ::/ ^-\v rencontre sur Is sits. 



d coniasisr 



Termirre 



Figure 5.17 : 

Emploi des 
references de 
caracteres 
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Un peu penible quand meme. . . Ne serai t-il pas possible de tirer profit de 
la capacite des editeurs HTML a transformer automatiquement tout ce 
qui a pu etre cree auparavant ? Bien sur que oui. 

1 Ouvrez Nvu, puis ouvrez le fichier pageacd _5_6.html (qui 
possede encore des caracteres accentues). 

2 Verifiez le parametrage de Nvu. Choisissez Outils > Preferences. 

Dans la fenetre qui s'ouvre, cliquez dans le volet de droite sur 
General si le volet General n'est pas affiche dans la partie droite. 
Verifiez que dans la section Lors de I'enregistrement ou de la 
publication de page l'option Reformater la source HTML est bien 
selectionnee. 

3 Cliquez dans le volet de gauche sur Avancees. Dans la section 
Caracteres speciaux, verifiez que Definir les caracteres suivants en 
tant qu'entites est bien fixe a Tout caractere ay ant une entite 
equivalente dans la specification HTML 4". 

4 Enregistrez votre fichier sous le nom pageacd _5_6b.html. 

En examinant le code source, vous constaterez que tous les caracteres 
possedant une entite equivalente ont bien ete remplaces par celle-ci. 






■-■""J^i o»wc»» 
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Figure 5. 7S ; Page automatiquement transformee par Nvu 

Remarquez que, si nous avons ici modifie le nom du fichier, cela n'est 
pas obligatoire : le simple fait d'enregistrer le fichier accomplit la 
transformation. 
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Caracteres non affichables 

Malgre toutes les precautions, un agent utilisateur n'est pas toujours en 
mesure de restituer de maniere significative tous les caracteres d'un 
document. Par exemple, si l'agent utilisateur ne dispose pas d'une police 
appropriee, la valeur d'un caractere peut ne pas s'exprimer au travers de 
1' encodage de caracteres interne de l'agent utilisateur, etc. 

Vu la palette des reponses possibles en pareils cas, la specification 
HTML 4.0. 1 ne suggere aucun comportement specifique. Selon la mise 
en oeuvre, les caracteres non affichables peuvent egalement etre geres 
par le systeme d'affichage sous-jacent et non par 1' application elle- 
meme. II est recommande par le W3C que les agents utilisateurs 
adoptent un mecanisme visible et clair, mais non intrusif, pour avertir 
1' utilisateur de 1' absence des ressources necessaires. 

Le tableau suivant presente les entites les plus employees en HTML. 



Tableau 5.2 : 


Jeu des references de caracteres Latin-1 (ISO-8859-1 ] 


Carac- 
tere 


Entite 


Decimal 


Hexa- 
decimal 


Carac- 
tere 


Entite 


Decimal 


Hexa- 
decimal 


< 


Sit; 


S#60; 


S#x3c; 


e 


seacute; 


S#233; 


S#xe9; 


> 


sgt; 


S#62; 


S#x3e; 


e 


secirc; 


S#234; 


ຬ 


espace 

inse- 
cable 


  


S#160; 


stxaO; 


i 


ì 


S#236; 


stxec; 


« 


« 


S#171; 


stxab; 


i 


î 


S#238; 


stxee; 


± 


Splusmn; 


S#177; 


&#xbl; 


I 


Siuml; 


S#239; 


stxef; 


» 


sraquo; 


S#187; 


stxbb; 


6 


ô 


S#244; 


S#xf4; 


X 


& times, : 


S#215; 


S#xb7; 


d 


soaml; 


S#246; 


StxfS; 


a 


sagrave; 


S#224; 


stxeO; 


+ 


& divide; 


S#247; 


S#xf7; 


a 


sacirc; 


S#226; 


S#xe2; 


u 


Sugrave; 


S#249; 


S#xf9; 


Q 


ç 


S#231; 


S#xe7; 


u 


Sucirc; 


S#251; 


Stxfb; 


e 


& e grave ; 


S#232; 


S#xe8; 


ii 


Suuml; 


S#252; 


Stxfc; 


T i A 

















L'Annexe D presente une liste plus complete des caracteres du jeu 
Latin- 1 . 
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Nous avons deja rencontre avec les tableaux l'attribut dir, definissant la 
directionnalite. Celui-ci, combine ou non avec l'attribut lang, permet 
d' adapter encore mieux vos pages au public vise. Ces attributs seront 
etudies plus en detail dans le Chapitre 10, traitant de l'internatio- 
nalisation et de la localisation. 



5.4. Modification de I'apparence 
du texte 

HTML dispose de plusieurs elements permettant de modifier 
1' apparence du texte, similaires en un sens aux enrichissements que vous 
pouvez apporter a un document dans un traitement de texte. II est ainsi 
possible de modifier le style d'un mot individuel, d'une expression ou 
d'une phrase. II existe de bonnes raisons de vouloir proceder ainsi, mais 
il existe egalement d'excellentes raisons de ne pas le faire. Meme si tous 
ces elements ne sont pas deconseilles, il reste preconise de leur preferer 
les feuilles de style. 

Elements IT, I, B, BIG, SMALL, STRIKE, S 
etU 

Ajouter du gras, de l'italique et du soulignement a certaines parties de 
vos textes augmente leur impact et contribue a l'efficacite de votre 
message pour le public concerne. Comme cela a deja ete signale, mieux 
vaut toutefois employer une emphase structurelle a l'aide des elements 

EM et STRONG, deja abordes. 

Le tableau suivant presente les elements utilisables. 



Tableau 5.3 : Elements de modification de police 


Element 


But 


Exemple 


TT 


Texte affiche en police non 
proportionnelle 


<TT>texte</TT> 


I 


Texte en italique 


<l>texte</i> 


B 


Texte en gras 


<B>texte</B> 


BIG 


Texte affiche dans une police 
plus grande 


<BiG>texte</BiG> 
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Tableau 5.3 : Elements de modification de police 


Element 


But 


Exemple 


SMALL 


Texte affiche dans une police 
plus petite 


<SMALL>teXte</ SMALL> 


STRIKE et S 


Texte barre [deconseille] 


<S>texte</S> 


U 


Texte souligne (deconseille) 


<U>texte</u> 



Remarquez que la restitution des elements de style de police depend de 
1' agent utilisateur. 

II est possible d'obtenir une bien plus grande diversite d'effets de police 
en utilisant les feuilles de style. Les elements de style de police doivent 
etre correctement imbriques. La restitution des elements de style de 
police imbriques depend de 1' agent utilisateur. 

Modificateurs de police : elements FONT 
et BASEFONT 

L'element BASEFONT definit les caracteristiques de la police de base. II 
est generalement place en tete d'un document HTML. Les modifications 
ulterieures apportees a la police grace a l'element FONT sont relatives a 
la police de base definie par l'element BASEFONT. 

Ces deux elements sont desormais deconseilles. lis possedent plusieurs 
attributs facultatifs : 

Attribut size 

Cet attribut deconseille deflnit la taille de la police. Sa valeur peut etre 
exprimee comme entier compris 1 et 7, attribuant a la police une 
certaine taille fixe dont la restitution depend de 1' agent utilisateur, ou 
comme accroissement relatif : la valeur +1 signifie la taille au-dessus, la 
valeur -3 signifie trois tailles en dessous. Toutes les tailles se trouvent 
sur une echelle allant de 1 a 7. 

Si l'element BASEFONT est absent ou ne definit pas l'attribut size, la 
taille de police de base est egale a 3. 
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Police destitres 

RBUROUE 

La taille de police de base ne s'applique pas aux titres, sauf quand 
ceux-ci sont modifies par un element font avec un changement de taille 
de police relatif. 



Attribut color 

Cet attribut deconseille specifie la couleur du texte (reportez-vous au 
Chapitre 6 pour plus de details). 

Attribut face 

Cet attribut defmit une liste de noms de police, separes par des virgules, 
que 1' agent utilisateur devrait employer par ordre de preference. Vous 
trouverez ci-dessous un petit exemple de la mise en oeuvre de cet attribut. 
L'affichage dans un navigateur est montre dans la figure qui suit. 

Listing 5-5 : Tallies de police 

<P align="center"xfont size=l>size=K/font><BR> 

<font size=2>size=2</font><BR> 

<font size=3>size=3</fontXBR> 

<font size=4>size=4</fontXBR> 

<font size=5>size=5</fontXBR> 

<font size=6>size=6</fontXBR> 

<font size=7>size=7</fontX/P> 



[I1IIHIBMCT7 






Differentcs tailk's de police 
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Figure 5.19 . 

Differents types de police 

Une parade aux nombreux problemes poses par l'element FONT consiste a 
recourir aux feuilles de style en cascade (CSS). Lorsqu'elles sont utilisees 
correctement, les feuilles de style permettent aux concepteurs Web de 
suggerer un format d'affichage pour certaines portions de texte, sachant 
que le navigateur de l'utilisateur peut ne pas en tenir compte. Vous pouvez 
modifier la couleur, la taille, la graisse et le style du texte. Vous pouvez 
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meme disposer d'un style de recouvrement et de justification de 
paragraphe. Cette methode, bien plus souple que les elements disponibles 
via HTML, est etudiee en detail dans le Chapitre 8. En fait, les plus anciens 
navigateurs (ceux qui n'utilisent pas CSS) ignorent automatiquement les 
feuilles de style, ramenant tout dans le style de texte par defaut. 



9' 



Tailles relatives 

Si vous decidez d'avoir recours a l'element font pour modifier la 
taille ou les couleurs d'une page fondamentale, servez-vous de tailles 
relatives (size=+l au lieu de size=4) et choisissez des couleurs 
ressortant sur un fond blanc, noir ou gris, au cas ou le fond serait ainsi 
predefini dans les preferences du navigateur. 



Indices et exposants : elements SUB et SUP 

Le fran£ais emploie regulierement des abreviations dans lesquelles un 
des termes est ecrit comme exposant : M lle , l er , etc. En outre, les 
notations mathematiques (etudiees un peu plus loin) ont frequemment 
recours a des exposants : a 2 + b 2 = c 2 . 

HTML propose a cette fin les elements SUB (subscript, indice) et SUP 
(superscript, exposant). II s'agit d'elements ligne qui decalent 
legerement vers le bas ou vers le haut le texte par rapport au reste de la 
ligne. Leurs balises d'ouverture et de fermeture sont obligatoires. 

L'element indice SUB place le texte en dessous de la ligne de texte 
normal. Cela est frequemment employe pour des notes de bas de page 
ou de glossaire, souvent liees a l'aide d'un signet (ou ancre) vers une 
reference situee a la fin du document. Par exemple, considerez le 
fragment de code suivant : 

<P>I1 existe d'ailleurs de nombreux widgets<SUB> 

<A HREF=#notel>[l]</A></SUB> complé mentaires 

Disponibles en té lé chargement . . . </P> 

<PXBRXBRXBRXBRXBRX/P> 

<P>. . . suite du contenu . . . </P> 

<PXBRXBRXBRXBR><BR></P> 

<PXCITE id="notel">[l] Widget (<B>WK/B>ndows ga<B>DGET</B>) . 
Dé signe sous Unix et Linux un outil permettant 
d'accomplir une action. Plus connu sous le nom de 
"contrô le" avec Windows . </CITE></P> 

Ce code procure un lien hypertexte vers la definition du terme widget. 
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Figure 5.20 : 

Le premier paragraphe presence un lien 



Figure 5. 21 : 

Le premier paragraphe presente un lien. Un 
die sur celui-ci mene vers la definition du 
terme. 



Comme vous l'avez sans doute devine tout seul, l'element exposant 
accomplit exactement le contraire, placant le texte au-dessus de la ligne 
de texte normal. Bien que cela puisse egalement etre utilise pour des 
notes, l'usage le plus frequent concerne des notations chimiques ou 
mathematiques. Ainsi, 

a<SUP>2</SUP> + b<SUP>2</SUP> = c<SUP>2</SUP> 

affiche a l'ecran : a 2 + b 2 = c 2 
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Figure 5.22 : 

Equation obtenue a I'aide de /'element 
SUP 



Remarquez que nous avons employe ici un element CODE pour afficher 
1' equation dans une police non proportionnelle. 

Les termes lies a la langue, les notes, les equations chimiques ou 
mathematiques sont autant de raisons en faveur d'un emploi judicieux 
des indices et des exposants. 
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Emploi intelligent des notes en HTML 

Une note est liee au corps d'une section et expliquee soit a la fin de 
cette section soit a la fin du document. Comme certains documents 
peuvent etre de grande taille, preferez en HTML les notes placees en fin 
de section ou en pied de page, pour epargner a vos utilisateurs une 
navigation intensive. 
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5.5. Notation mathematique 

Comme nous l'avons deja souligne, le World Wide Web a vu le jour en 
1991, avant tout pour favoriser le transfert de donnees entre les 
physiciens. Malgre cette origine, les notations scientiflques et 
mathematiques etaient mal prises en charge par les premieres versions 
de HTML. HTML 4.0 propose cependant quelques methodes tres 
sophistiquees pour afficher de facon attrayante et fonctionnelle les 
equations mathematiques. De plus, divers programmes auxiliaires 
offrent d'autres moyens d' afficher des mathematiques sur le Web. 



En texte simple 

La facon la plus simple d' afficher des mathematiques sur le Web est 
parfois la meilleure, meme si ce n'est pas la plus attrayante : vous 
pouvez recourir a des caracteres textuels pour les representee comme 
cela est montre dans l'exemple de l'element SUP. Comme nous l'avons 
fait dans cet exemple, mieux vaut recourir a un element CODE pour 
afficher l'equation dans une police non proportionnelle (a espacement 
fixe). 

Vous devrez cependant parfois employer dans des equations des 
symboles particuliers, comme des lettres grecques. Dans un tel cas, 
l'emploi de l'element FONT deja presente, bien que deconseille, reste 
une solution : 

Listing 5-6 : Notations scientifiques en texte 

<Hl>Formules statistiques</Hl> 
<HR> 

<P>Intervalle de confiance de la moyenne <I>m</I> pour 
une population normale d' Seacute; cart-type 

<FONT face="Symbol">s</FONT> a echantillon <I>n</I> :<BRXBR> 
<CODEXBIGXBIG> 

[x - t Stimes; (<F0NT f ace="Symbol">s</FONT>/n<SUP>&f racl2;</SUP>) ; 
x + t Stimes; (<F0NT face="Symbol">s</FONT>/n<SUP>&f racl2;</SUP» ] 
</CODEX/BIGX/BIG> 
</P> 

Helas ! Tous les navigateurs n'interpretent pas ce code de la meme 
facon. Seul Internet Explorer tire profit de l'element FONT pour afficher 
correctement le sigma grec. 
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I Intervalle de confiance de la moyenne m pour une 
population normale d'ecart-type a a echantillon n : 

[x - t x (o/n H ) ; x + t x (o/n H ) ] 



Figure 5.23 : Exemple d'equation ecrite a I'aide de caracteres taxte avec 
Internet Explorer 



Intervalle de confiance de la moyenne m pour une 
population normale d'ecart-type s a echantillon n : 



[x - t x (s/n^) ; x + t x (s/n* 4 ) ] 



Figure 5.24 : Exemple d'equation ecrite a I'aide de caracteres taxte avec 
Firefox 



Intervalle de confiance de la moyenne m pour une population 
| normale d'ecart-type s a echantillon n : 

[x - t x (s/n^) ; x + t x (s/rf 4 )] 



Figure 5.25 : Exemple d'equation ecrite a I'aide de caracteres taxte avec 
Amaya. 

L'emploi de texte simple atteint toutefois ses limites en presence de 
fractions compliquees, ou en cas d'operandes mathematiques plus 
avances. 



A I'aide de graphismes 

Une autre option consiste a creer des images de l'equation 
mathematique et de les inserer sur votre page, comme vous le feriez 
pour tout graphisme (ce sujet sera traite dans le Chapitre 7). Vous 
pouvez pour ce faire recourir a un editeur mathematique comme 
l'Editeur d'equation de Microsoft Word ou un programme commercial 
comme MathType (www.dessci.com/en/products/mathtype/). 

Utiliser des fichiers graphiques separes est une solution simple et rapide, 
mais les images ne peuvent pas etre facilement enregistrees avec les 
pages Web, tandis qu'il reste impossible de couper/coller les equations. 
Creer une image individuelle pour chaque equation peut representer un 
travail titanesque si la page traite intensivement des mathematiques. 
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L'apparence finale peut egalement etre variable selon les parametrages 
definis pour la page Web et pouvant etre outrepasses par l'utilisateur. 
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Figure 5.26 : 

Exemple d'emploi de 
I'editeur d'equation 
Word 



A I'aide de MathML 

Differents experts du Web, mathematiciens, scientifiques et autres ont 
travaille pour developper une solution qui permette d'incorporer les 
notations mathematiques en HTML. C'est un probleme complexe dont le 
but etait de definir un langage de notation structurel plutot qu'un simple 
langage de description de page. HTML 4.0 propose une excellente 
solution, sous la forme de MathML, un langage de notation mathematique 
developpe a partir de XML. La specification 1.01 de MathML est 
disponible a l'adresse www.w3.org/1999/07/REC-MathML-19990707/ 

MathML est simple, bien que par necessite complexe pour pouvoir 
representer la totalite des mathematiques modernes. Comme en matiere 
de conception Web, il existe differents editeurs, commerciaux ou gratuits, 
qui permettent de creer des equations grace a une interface simple et 
facile d'acces, de convertir votre travail, et de laisser au programme la 
tache de resoudre votre equation. Meme si, comme en HTML, il est 
possible de coder directement en MathML, mieux vaut employer un 
editeur. Nous ne saurions mieux vous conseiller que Amaya, cet excellent 
et universel produit gratuit developpe par le W3C... 
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Figure 5.27 : 

Amaya permet de 
realiser tres facilement 
des equations 
mathematiques sous 
MathML 
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L'exemple presents est la celebre solution de l'equation du second 
degre. Remarquez le pointeur place sur l'editeur mathematique. Le code 
de cette page est presente ci-dessous. 

Listing 5-7 : Exemple MathML 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; 

charset=UTF-8"> 
<title>MathML</title> 
<meta name="generator" 

content="amaya 8.7.3, see http://www.w3.org/Amaya/"> 
</head> 

<body> 

<hl align=center>Solution de 1' équation du second 
degré</hl> 

<P> 

<code> 

<math xmlns="http: //www. w3.org/ 1998 /Math/MathML"> 
<mi style="font-style : normal">x</mi> 

<mo>=</mo> 
<mf rac> 
<mrow> 

<mo>-</mo> 

<mi style="font-style : normal ">b</mi> 

<mo>+</mo> 

<msqrt> 

<mo> (</mo> 
<msup> 

<mi style=" font-style : normal ">b</mi> 
<mn>2</mn> 
</msup> 
<mo>-</mo> 
<mn>4</mn> 
<mi>ac</mi> 
<mo>) </mo> 
</msqrt> 
</mrow> 
<mrow> 

<mn>2</mn> 

<mi style="font-style : normal">a</mi> 
</mrow> 
</mf rac> 
</math> 
</code> 
</p> 
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</body> 
</html> 

Malheureusement, rares sont les navigateurs a reconnaitre MathML : 
pour le moment, Firefox et Internet Explorer en restent encore 
totalement incapables. 
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Figure 5.28 : 

Contrairement a Amaya, ni Firefox 2. 
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Figure 5. S3 : 

... ni Internet Explorer 7. ne savent 
actuellement reconnaitre MathML 



Cet etat de choses devant logiquement evoluer, nous ne saurions faire 
autrement que de vous recommander de vous interesser a MathML. 



5.6. Resume 

L'element HR permet d'inserer une ligne horizontale a l'ecran. 

La balise <! — commentaire — > signale un commentaire 
ignore par HTML. Ces commentaires sont precieux lorsque le site 
est developpe et/ou maintenu par plusieurs personnes. 

Les elements DIV et SPAN, grace a leurs attributs id et class, 
offrent un mecanisme generique de structure. lis sont 
essentiellement employes avec les feuilles de style (grace aux 
attributs id et class) et/ou l'attribut lang pour mieux exploiter 
HTML. 

L'element PRE deflnit un bloc de texte preformate : la mise en 
forme stipulee est theoriquement restituee telle quelle a l'ecran, y 
compris les espaces vierges normalement ignores par HTML. 
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L'element BLOCKQUOTE (de type bloc) et son equivalent ligne Q 
servent a signaler une citation. lis doivent de preference etre 
employes en combinaison avec l'element CITE, procurant la 
source de la citation. 

L'element ADDRESS, generalement place au debut ou a la fin d'un 
document, sert a fournir des informations de contact applicables 
au document. 

L'attribut style permet de modifier les marges d'un bloc de 
texte. 

Les elements EM et STRONG s'utilisent pour mettre en exergue une 
portion du texte, qui possede par exemple une signification 
particuliere dans un contexte technique. 

ABBR et ACRONYM sont des elements qui permettent aux auteurs 
d'indiquer clairement les occurrences des abreviations et des 
acronymes. 

L'element CODE a pour but d'afficher un fragment de code 
informatique. C'est un element structurel, accompagne des 
elements PMR (sortie de programme) et KBR (texte a saisir au 
clavier). 

Le jeu de caracteres habituellement employe en Europe 
occidentale est ISO-8859-1, egalement nomme Latin-1. II existe 
toutefois de nombreux autres encodages de caracteres repondant 
aux besoins des differentes langues. 

Les caracteres ne pouvant etre obtenus directement au clavier 
(comme les majuscules accentuees) ou susceptibles de poser 
probleme dans du code HTML (comme les caracteres < et >) sont 
remplaces dans le code HTML par des references de caracteres, 
exprimees sous forme numerique ou a l'aide d'entites caracteres. 

FONT et BASEFONT sont des elements qui permettent de definir et 
de modifier les polices employees. lis sont desormais deconseilles 
au profit des feuilles de style. 

Les indices et exposants sont obtenus a l'aide des elements SUB et 

SUP. 

Les equations mathematiques peuvent etre representees a l'aide 
de texte brut, ou d'images realisees a l'aide d'autres produits ou 
de MathML, la solution preconisee par le W3C pour l'affichage 
de notations mathematiques. MathML reste malheureusement tres 
peu pris en charge par les navigateurs actuels. 
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Lescouleurs 177 

Les images 186 

Images animees 198 

Image cliquable 210 

Inclusion generique d'images : element OBJECT 224 

Resume 240 
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La plupart des pages Web ont recours a des couleurs, des images et des 
icones exploiters d'une facon ou d'une autre. Choisir avec soin un 
ensemble d' images contribue a donner a votre site son style particulier. 
Cet ensemble procure aux visiteurs des indices visuels sur le contenu et 
est egalement susceptible de servir d'outil de navigation. 

La premiere etape pour passer d'une simple page de texte en noir et 
blanc a une page plus attractive consiste a employer les couleurs. 
L'etape suivante consiste a incorporer des images en divers 
emplacements de la page : dans des elements, comme arriere-plan d'une 
page ou d'une portion de celle-ci, etc. 

En regie generale, ne demandez jamais a une image de faire le travail 
d'un texte. De simples liens texte peuvent conduire les visiteurs vers 
d'autres parties du site aussi facilement qu'un bouton graphique, sans 
augmenter le temps de chargement. Si vous retenez des boutons 
graphiques, ceux-ci doivent etre aussi « legers » que possible. 

Les images sont toutefois precieuses : vous pouvez employer le logo de 
votre organisme dans l'en-tete, ajouter d'autres images comme elements 
illustratifs, et meme employer un « texte icone » c'est-a-dire une police 
de caracteres fortement associee a votre site. 

Outre les images statiques, vous pouvez employer des images animees 
(gif animes). Comme vous le verrez dans ce chapitre, il faut dans ce 
domaine agir avec prudence : un grand nombre d'images animees peut 
fatiguer l'oeil assez vite et rendre la page plus confuse qu'explicite. 

Enfm, une etape encore plus evoluee consiste a creer des images 
representant plusieurs liens : les images cliquables (imagemap). HTML 
permet de faire en sorte qu'une zone de l'image soit active, c'est-a-dire 
qu'un lien lui soit associe. Vous allez etudier ces differentes techniques 
dans ce chapitre. 

Elements etudies : 

bgcolor, text, link, vlink, alink, color 

IMG, src, alt 

AREA, shape, coords, nohref 

MAP 

u semap 

OBJECT, data, type 
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6.1. Les couleurs 

La toute premiere etape de l'enjolivement d'une page, apres avoir 
parfaitement defini sa structure comme vous avez appris a le faire dans 
les chapitres precedents, consiste a y ajouter de la couleur. 

Les couleurs sont souvent mises a profit par les concepteurs de sites 
pour donner a un site une note particuliere, ce qui porte generalement le 
nom de « charte graphique ». Lorsque vous surfez sur le Web, essayez 
de noter les pages qui vous plaisent et celles que vous n'aimez pas, et 
pourquoi. Se servir de couleurs specifiques sur l'ensemble du site aide 
les visiteurs a se souvenir de celui-ci, sans que le temps de chargement 
de la page soit augmente. 

Exploiter les couleurs est de la plus grande simplicite en HTML, grace a 
divers attributs de l'element BODY : bgcolor et text definissent 
respectivement la couleur d'arriere-plan et la couleur de texte, link, 
vlink et alink definissent respectivement la couleur des liens, la 
couleur des liens visites et la couleur des liens selectionnes. bgcolor 
sert egalement a definir la couleur de fond dans des tableaux, tandis que 
l'attribut color, propre aux elements FONT et BASEFONT, definit la 
couleur du texte dans un element individuel. 

La valeur des attributs de couleur se rapporte aux definitions des 
couleurs telles que specifiees dans la specification SRGB, relative a un 
standard des couleurs sur Internet et actuellement dans sa version 1.10 
(www.w3.org/Graphics/Color/sRGB). Une valeur de couleur peut soit etre un 
nombre hexadecimal (prefixe par un caractere diese « # ») soit l'un des 
noms de couleur predefinis. 





Tableau G. 1 : Noms de 


quelques couleurs et valeurs RGB 


Nom 


Valeur RGB 


Nam 


Valeur RGB 


Black 
Silver 


#000000 

#cococo 


Green 


#008000 


Lime 


#00FF00 


Gray 


#808080 


Olive 


#808000 


White 


#FFFFFF 


Yellow 


#FFFF00 


Maroon 


#800000 


Navy 


#000080 


Red 


#FF0000 


Blue 


#0000FF 
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Tableau G. 1 : Noms de quelques 


couleurs et valeurs RGB 


Norn 


Valeur RGB 


Norn 


Valeur RGB 


Purple 


#800080 


Teal 


#008080 


Fuchsia 


#FF00FF 


Aqua 


#00FFFF 



Ces noms de couleur sont insensibles a la casse : les valeurs de couleur 
#800080, Purple et PURPLE designent toutes trois la meme couleur 
violette. 
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Figure B.I : Les 140 couleurs a noms predefinis 

Modification du schema de couleurs 
de la page 

Modifier un schema de couleur a l'interieur d'une page s'effectue dans 
1' element BODY, car cela affecte pratiquement tous les elements du corps 
de la page. Apres une modification de couleur, verifiez-la toujours en la 
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visionnant avant de la publier sur le Web, si possible avec le maximum 
d'ordinateurs et de configurations differentes. Cela afin de bien verifier 
que la page reste parfaite en toutes circonstances. 

Nous allons modifier le schema de couleur de notre page d'accueil, tout 
d'abord a l'aide des couleurs standard : 

1 Ouvrez dans le Bloc-Notes le fichier pageacd _5_7.html (la 
derniere version de la page d'accueil). 

2 Modifiez a nouveau le numero de version : 

<META name="version" content="l . 6 . 1"> 

3 Attribuez une couleur d'arriere-plan a l'integralite de la page : 

<BODY bgcolor="black"> 

4 Attribuez une couleur au texte de la page (si vous ne le faites pas, 
la couleur par defaut du texte etant le noir, toute la page sera 
invisible) : 

<BODY bgcolor="black text="white"> 



REARGUE 



BODY ou BASEFONT 

Vous pouvez egalement modifier la couleur du texte a l'aide d'un 
element basefont. Un element 



<BASEFONT color="white "> 

aurait un effet identique a 

<BODY text="white"> 



5 Modifiez les couleurs des liens : 

<BODY bgcolor="black" text="white" link="yellow" 
vlink=" silver" alink= "purple "> 

4 Enregistrez votre fichier sous le nom pageacd _6_1 .html. 

Examinez cette nouvelle page dans votre navigateur. D' accord, elle 
n'offre rien d'exceptionnel et pourrait meme etre decrite comme un peu 
macabre, mais il ne s'agit que d'un exemple ! L'emploi des noms de 
couleur generiques est d'une grande simplicite et parfaitement explicite. 
Vous pouvez indifferemment employer le codage hexadecimal et ecrire : 

<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFF00" 
vlink="#C0C0C0" alink="#8 00 8 0"> 
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La valeur hexadecimale employee porte le nom de code RGB de cette 
couleur. Dans ce code a six chiffres, les deux premiers chiffres 
correspondent a la quantite de rouge (R, red), les deux suivants a la 
quantite de vert (G, green) et les deux derniers a la quantite de bleu (B, 
blue). Plus les differentes valeurs sont elevees et plus la couleur est 
lumineuse : trois fois pour le noir et trois fois FF pour le blanc. Vous 
pouvez specifier n'importe quelle valeur hexadecimale, meme si elle ne 
correspond pas a une couleur standard. C'est ce qu'a fait Micro 
Application. 
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<BODY Jigcolor = "#Q03366"> 






<meta http-eq\iiv= "Content-Type" cant ent= "text/ html; chacset=UTF-S"> 
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Figure 6.2 : Micro Application a retenu comme couleur de fond un bleu 
profond, defini dans /'element BODY grace a lattribut bgcolor="#0033B6". 

Comme vous etes un utilisateur subtil, vous realisez que cela permet de 
disposer de 256 3 couleurs possibles (de a FF ou 2 55, done 256 
possibilites pour chaque composante primaire), soit environ 16,8 
millions de couleurs... 

Vous risquez de dire alors : « Rigolo, va ! Facile a dire, maisje n'ai pas envie 
de tester une multitude de combinaisons avant de trouver la couleur qui me 
plait ! » Pas de panique, c'est enfantin. Meme si vous ne disposez pas 
d'un logiciel de dessin evolue comme Adobe PhotoShop ou Corell 
Draw (ou, en etant moins depensier, d'un partagiciel comme Paint Shop 
Pro ou mieux encore d'un produit de dessin gratuit comme 
1' incomparable The Gimp), les systemes d' exploitation Windows sont 
accompagnes d'un programme de dessin simple (Paint) qui permet de 
disposer d'un echantillonneur de couleurs gratuit. 

1 Ouvrez Paint (en principe, Demarrer > Tous les programmes > 
Accessoires > Paint). 

2 Choisissez Couleurs > Modification des couleurs . La fenetre 
Modification des couleurs s'affiche. 
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Cree une nouvell? couleur, 



Figure G.3 : Le logiciel de dessin Windows Paint 

Cliquez sur Definir les couleurs personnalisees. La fenetre 
Modification des couleurs s'agrandit, proposant une zone coloree 
dans laquelle se trouve un curseur, une zone de visualisation 
agrandie de la couleur en bas, ainsi que, sur la droite, les valeurs 
RGB exprimees en nombres decimaux. 





«"B™"^^ 






Couleurs de base : 

rrrrrmrr 
mrrrrmmm 

■ !■■■■■■ 

Couleurs personnalisees : 

rrrrrrrr 
rrrrrrrr 

Definir les couleurs personnalisees » *~ 








< 






■ Teinte:[i 

| Satur. :J2 

DuleurlUnie Lm: p 


40 Rouge: 
4Q~ Vert : 

~ Bleu: 


— 

lOij 


Figure G.4 : 




OK | Annuler ] 


Ajoutei auH couleuis 


personnalisees 


Fenetre Modification 












des couleurs de Paint 



4 Deplacez le curseur et choisissez la couleur souhaitee. Notez par 
ecrit les valeurs RGB, et continuez a rechercher des couleurs ou 
fermez Paint (cliquez sur Annuler puis sur Fichier > Quitter). C'est 
tout ! 

Enfin, pas exactement. Vous disposez de chiffres decimaux qu'il faut 
convertir en hexadecimal. A moins d'etre tres doue et de savoir faire 
cela avec facilite, vous avez besoin d'un convertisseur. La 
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Calculatrice Windows, egalement livree avec le systeme d' exploitation, 
est parfaite pour cela. 

1 Ouvrez la calculette (Demarrer > Tous les programmes > 
Accessoires > Calculatrice). Passez si necessaire (c'est probable) 
en mode scientifique en choisissant Affichage > Scientifique. 

Verifiez que le bouton d'option Dec. est selectionne, juste sous la 
ligne d' affichage. 
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Figure G.5 : 

Calculatrice Windows 
en mode scientifique 

2 Saisissez le code de la couleur rouge. 

3 Cliquez sur le bouton d'option Hex et notez par ecrit le resultat a 
deux chiffres (il peut y avoir une lettre) correspondant a la couleur 
rouge. 

4 Repetez ces etapes pour le vert et le bleu, puis assemblez ensuite 
les differents codes de deux chiffres : RRVVBB. Voila votre code 
RGB pour cette couleur. 

En vous reportant a la figure montrant la fenetre Modification des 
couleurs de Paint de la figure 6.4, vous voyez que les valeurs pour la 
couleur selectionnee etaient 0, 51 et 102, ce qui donne 0, 33 et 6 6, 
done un code RGB de 03366 : justement la couleur employee par 
Micro Application pour sa page d'accueil. 
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Convertisseur 

Remarquez que si vous disposez d'un code RGB en hexadecimal et 
que vous souhaitez voir a quelle couleur il correspond, accomplissez 
exactement 1' operation inverse : convertissez le code en decimal, puis 
saisissez directement sous Paint les valeurs obtenues dans les cases 
adequates : la couleur correspondante s'ajuste apres la modification de 
chaque valeur, pour aboutir a la couleur cherchee. 
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Vous pouvez egalement vous servir d un convertisseur en hgne, 
comme celui propose par AlterLinks a l'adresse www.alterlinks.fr 
/conversion-table/RGB-HTML-RWX.php 



Modification de la couleur du texte dans 
un element de page 

Comme pour l'eiement BASEFONT, vous pouvez recourir a l'attribut 
color d'un element FONT pour modifier la couleur du texte pour ou 
dans un element. Gardez bien present a l'esprit que toute modification 
appliquee a l'aide de FONT reste active jusqu'a la fermeture de l'eiement 

FONT ! 

Pour renforcer l'impact d'un terme important, vous pouvez combiner 
l'emploi d'une emphase STRONG avec une couleur rouge, par exemple : 

<P>Pensez Sagrave; <STRONG><FONT color="red">sauvegarder 
</FONT></STR0NG> ré guliè rement votre travail ! 
</P> 

Le mot « sauvegarder » s'affiche en gras et en rouge. 



Fichier Edition Affichage A|ler a Marque-paces Outils ? 










Jn]x]| 


<£. 














b_"lJ |G File:///G:/HTML/MonSite/sauvegarder,htiTil 




d @ 


OK |Q 




•■ C-'ftrrioi'i-age Derniires nouvslle; . . . Oidit Agricole i B6. ,< ** magicthegathering,,.. W Bestiaire- 


jsu ' Tout Mon eBay Logout » 




Modification de 


couleur d 


'un 


mot 






Voici TeGe'l de cstte instruction : 

<P>Pensez a <5THOHGXFOHT color="red">sauvegarder 

Pensez a regulierement votre travail ! 


</FONTX/STRONG> 


^ 


=«™„t V 




vail </P> 1 


Termine 















Figure G.G : Modification de la couleur d'un mot dans un element 



LE GUIDE COMPLET 183 



Chapitre 6 



Couleurs et images 



Modification du schema de couleurs d'un 
tableau 

bgcolor est un autre attribut facultatif de plusieurs elements de 
tableau TABLE, TR, TD et TH. De facon analogue a 1' attribut bgcolor de 
1' element BODY, il modifie la couleur de fond. II peut done modifier la 
couleur de fond de tout le tableau, d'une ligne ou d'une cellule d'en-tete 
ou de donnee. 

Si vous modifiez le fond d'une cellule, assurez-vous bien que cela ne 
compromette pas la lisibilite du texte qui y est place : servez-vous de 
l'element FONT ou mieux encore d'une feuille de style pour modifier 
egalement la couleur du texte. L' attribut bgcolor est desormais 
deconseille au profit des feuilles de style. Les fonds colores de tableaux 
ne sont pas reconnus par les plus vieux navigateurs. 

Modifier la couleur d'une cellule de tableau 

Pour modifier la couleur de fond d'une cellule de tableau, inserez 
l'attribut bgcolor dans l'element TD, exactement comme vous 
procederiez avec un element BODY ou un element TABLE. 
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Figure G. 7 : Modification de la couleur de fond d'une cellule de tableau 

N'oubliez pas de modifier si necessaire la couleur de la police a l'aide 
de l'element FONT ! 



Precautions a prendre avec les couleurs 

L'emploi des couleurs necessite certaines precautions. Sachez que leur 
rendu reel depend de la configuration tant materielle que logicielle de 
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l'ordinateur de l'utilisateur. Chaque carte graphique, chaque ecran, voire 
chaque navigateur peut influencer legerement le rendu. Si la difference 
est generalement subtile, une configuration inhabituelle peut rendre le 
site difficile a lire. C'est pourquoi, une fois encore, mieux vaut tester le 
site sur autant de machines differentes que possible (il suffit d'examiner 
les rangees de televiseurs dans n'importe quel magasin d'audiovisuel ou 
grande surface pour disposer d' une idee des variations susceptibles de se 
produire selon le materiel employe !). Une bonne astuce consiste 
souvent a examiner le site a l'aide d'une machine et de logiciels datant 
un peu, pour voir si le site se « degrade » de facon acceptable. 

Par exemple, vous avez remarque que le codage RGB permet de 
disposer de plus de 16 millions de couleurs : si votre ecran n'est pas 
configure en millions de couleurs, vous ne pourrez voir selon les cas que 
65 000 ou meme 216 couleurs (utilisation dans ce cas uniquement des 
nombres 0, 33, 6 6, 9 9, CC et FF). 

Meme si les couleurs peuvent apporter beaucoup d' informations aux 
documents et les rendre plus lisibles, mieux vaut s'en tenir aux principes 
suivants lors de leur emploi : 

Attention aux combinaisons de couleurs susceptibles de poser 
probleme aux personnes atteintes de daltonisme dans ses diverses 
formes. Toutes les etudes demontrent que 10 a 12 % de la 
population distinguent plus ou moins mal les couleurs. Si cela se 
limite le plus souvent a une confusion entre le rouge et le vert, 
certains sont totalement aveugles aux couleurs. Les couleurs 
possedant la meme intensite lumineuse leur sont particulierement 
difficiles a distinguer. Lorsque vous definissez les couleurs de 
fond et de texte, souvenez-vous que des couleurs a fort contraste, 
noir et blanc ou noir et jaune, sont plus facile a voir et a 
differencier. Les visiteurs souffrant d'une deficience d'acuite 
visuelle vous en sauront gre egalement ! 

Si vous employez une image d'arriere-plan ou definissez une 
couleur d'arriere-plan, veillez a bien assortir les diverses couleurs 
des textes. 

Les couleurs definies par les elements BODY et FONT, et par 
l'attribut bgcolor sur les tables ressortent differemment selon les 
plates-formes (par exemple, entre les stations de travail et les 
ordinateurs Macintosh et Windows, et entre les ecrans a cristaux 
liquides et les ecrans cathodiques) : vous ne pouvez pas compter 
uniquement sur un effet specifique. Dans le futur, la gestion du 
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modele de couleur SRGB en meme temps que celle des profils de 
couleur ICC devrait attenuer ce probleme. 

La specification de couleurs dans des elements HTML est 
deconseillee. Servez-vous plutot des feuilles de style. 

Enfin, sachez que les couleurs peuvent etre desactivees par l'utilisateur. 
Tous les navigateurs ou presque possedent desormais des options de 
gestion des couleurs ou autorisent les utilisateurs a definir un ensemble 
particulier de couleurs a utiliser pour tout site visite. Assurez-vous que 
vos graphismes ne risquent pas de disparaitre ou de perdre toute 
signification si un autre schema de couleur est retenu. Les schemas les 
plus classiques sont les suivants : 

Fond blanc, texte noir, liens hypertextes bleus. 
Fond noir, texte blanc et liens hypertextes jaunes. 
Fond gris, texte noir et liens hypertextes bleus. 

Qu'il s'agisse la des schemas les plus frequents ne signifie pas qu'ils 
soient les seuls. Certains utilisateurs peuvent avoir retenu des couleurs a 
contraste maximal, d'autres peuvent avoir augmente fortement la taille 
des polices afin de lire plus aisement les textes. 



6.2. Les images 



Vous le savez deja, il est possible de placer des images sur un site Web. 
Les pages Web ont le plus souvent recours a deux formats de fichiers 
graphiques, GIF (Graphic Interchange Format) et JPEG (Join 
Photographic Experts Group), meme s'il est parfois possible de rencontrer 
des images PNG (Portable Network Graphic). Le format JPEG, qui 
accepte 16,7 millions de couleurs, est surtout employe pour des 
photographies et les graphismes dotes de nombreuses couleurs. Leur 
systeme de compression leur permet de diminuer la taille totale des 
fichiers. En revanche, le format GIF, limite a une palette maximale de 
256 couleurs, sert plutot pour les dessins au trait, les icones et les images 
animees. 

Le format PNG, libre de droits, est annonce comme le successeur du 
format proprietaire GIF. PNG prend en charge trois types d' images : 
vraies couleurs, echelle de gris et fondee sur une palette (« 8 bits »), 
tandis que JPEG ne prend en charge que les deux premiers et GIF 
uniquement le troisieme, meme s'il peut emuler une echelle de gris a 
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l'aide d'une palette de gris. PNG gere en outre la transparence d'une 
facon plus sophistiquee que GIF. II s'agit d'un format destine aux 
images fixes, meme si un projet nomme MNG pour les images animees 
a vu le jour en 1999. La compression PNG est d'excellente qualite. 

En pratique, le choix du format se limite sou vent a la version de 1' image 
qui occupe le moins de place. Le temps de chargement d'une page etant 
proportionnel au nombre d'elements graphiques qu'elle contient ainsi 
qu'a leur taille totale, il est capital de retenir des images de la plus faible 
taille possible. II est prouve qu'une page demandant plus de 15 secondes 
de telechargement a tendance a chasser les visiteurs potentiels 
(attention : en situation reelle, pas en local sur votre ordinateur !). 

Quel que soit le format d'image retenu, l'inclusion dans une page Web 
reste identique. 

Image d'arriere-plan 

Au lieu d'un fond de couleur uniforme, vous pouvez utiliser une image 
d'arriere-plan (background), specifiee dans 1' element BODY a l'aide de 
l'attribut background. La syntaxe est la suivante : 

<BODY background =" nomfichier"> 

ou « nomfichier » est le nom du fichier image a utiliser comme fond 
d'ecran. Cet attribut est desormais deconseille, au profit des feuilles de 
style. 

Une telle image remplit l'ecran par un effet de mosai'que. Autrement dit, 
elle est repetee en largeur autant de fois que necessaire pour occuper la 
largeur de l'ecran et est de meme repetee en hauteur autant de fois que 
necessaire pour remplir toute la hauteur de l'ecran. 

Evitez les tres grands graphismes en fond d'ecran : cela fonctionne 
rarement bien, et les utilisateurs disposant de grands ecrans voient 
aisement la repetition du graphisme. 

Une image d'arriere-plan est prioritaire sur une couleur d'arriere-plan 
avec la plupart des navigateurs. 

Ce type d'image est principalement employe de deux f aeons : pour creer 
un effet de bordure (a droite ou a gauche) ou comme mosai'que filigranee 
sur tout l'ecran. 
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La premiere solution a recours a une image de hauteur relativement 
faible (par exemple, une spirale, ou des petits carreaux avec une marge) 
et de largeur egale a la largeur conseillee pour le site concerne. Ainsi, la 
repetition est en theorie uniquement verticale, et peut creer un effet de 
cahier a spirales ou de cahier d'ecolier a carreaux, avec un trait de marge 
en couleur. Inconvenient evident, si la largeur d'ecran employee n'est 
pas exactement celle prevue, la repetition peut egalement se produire 
horizontalement, detruisant toute cette belle presentation. 

Vous pourrez egalement parfois rencontrer une image ne mesurant que 
quelques pixels de haut et de grande largeur. L'auteur a pris la 
precaution de s' assurer d'une apparente continuite entre le haut et le bas 
de son image, ainsi qu' entre les cotes droit et gauche : toute repetition 
semble alors presque invisible. 
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Figure 6.8 : Une image ayant la forme d'un fin bandeau. 
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Figure G.9 : Un fin bandeau employe comme image de fond est une solution 
seduisante de prime abord. . . 

L'image employee ici, qui mesure 802 pixels de large sur 32 de haut, est 
adaptee a une fenetre de navigateur d'environ 800 pixels de large (soit 
une resolution de 800 x 600, pour un affichage en plein ecran). Si la 
fenetre est plus petite ou plus grande, tout 1' aspect est compromis. 
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Figure 6. 10 : 

Un aspect modifie par 
I'utilisateur 
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Figure 6.11 : ... mais qui reste largement dependante de I'utilisateur I 

La seconde solution a recours a une image de fond de relativement 
petite taille (plus la taille est petite et plus les erreurs de repetition sont 
imperceptibles), tres peu coloree et contrastee, servant ainsi de 
« filigrane » au reste du contenu. J'avoue affectionner particulierement 
ce type de fond, que je trouve efficace, sobre et elegant. 
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Figure 6. 12 : 

L'emploi d'un filigrane. 
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Figure 6.13 : L'emploi d'un filigrane. 
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Figure 6.14 : L 'emploi d'un filigrane de faible taille (ici 1 29 x 159 pixels) est 
une solution possible, independante de la taille de I'ecran employe. 



Image inseree 

Vous pouvez egalement inserer des images pratiquement dans tout 
element de votre page : une image peut done se trouver en plein milieu 
d'un texte, ou ce dernier s'enrouler en colonnes autour du dessin. 

Avant d'envisager de diffuser une image sur Internet, vous devez 
prendre certaines precautions (comme d'ailleurs avec pratiquement tout 
contenu) : veillez a toujours respecter scrupuleusement la legislation sur 
le copyright et les droits d'auteur. Pour pouvoir diffuser une image sur 
votre site, vous devez verifier que vous avez le droit de le faire : soit elle 
est libre de droits, soit vous avez obtenu 1' accord de son proprietaire 
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(auteur), soit enfin vous en etes vous-meme l'auteur. Meme dans ce 
dernier cas, si l'image est une photographie representant d'autres 
personnes, vous devez obtenir leur autorisation formelle. 

Depuis bien longtemps, HTML permet l'inclusion d'images a l'aide de 
1'element IMG. Cet element incorpore une image dans le document 
courant, a l'emplacement de la definition de 1'element. Depourvu de 
contenu, il est generalement remplace dans la ligne par l'image que 
designe l'attribut src, les images alignees a gauche ou a droite qui 
« flottent » hors de la ligne faisant exception. 

Nous allons modifier l'apparence de la page secondaire Region en 
inserant une image. Pour simplifier, nous allons employer une image 
dont disposent normalement tous les utilisateurs de machines Windows 
XP : une de celles se trouvant dans le dossier Echantillons d'images du 
dossier Mes images. Avant de commencer, il faut vous livrer a quelques 
travaux preparatories : 

1 Ouvrez l'Explorateur Windows, naviguez jusqu'a votre dossier 
MonSite et creez-y un sous-dossier, nomme Images : vous y 
placerez toutes les images employees sur le site. C'est une bonne 
habitude a prendre pour eviter de surcharger le repertoire 
principal. 
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Subdivisions 

Vous pourriez meme aller encore plus loin et subdiviser le sous- 
dossier Images en plusieurs sous-dossiers : glf (les images GIF statiques), 
glfanim (les gif animes), icone (les icones et boutons) et JPEG (les 
photos). 



2 Choisissez Demarrer > Mes images, puis cliquez sur le dossier 
Echantillons d'images. 

3 Selectionnez l'image Coucher de soleil.jpg, puis choisissez dans la 
barre de menu Edition > Copier. 

4 Revenez dans votre dossier MonSite/ 'Images, puis collez l'image 
de coucher de soleil en choisissant Edition > Coller. 

5 Procedez de la meme facon pour les images Hiver.jpg et 
Nenuphars.jpg. 

Vous etes maintenant pret a inserer des images sur votre site. 

6 Ouvrez le Bloc -Notes, puis ouvrez le fichier region1_4_3.html. 
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7 Modifiez d'abord le numero de version : 

<META name ="version" content="l . 6. 1"> 

8 Profitez-en pour modifier le lien vers la page d'accueil en fonction 
du nom du fichier actuel : 

<A href="pageaccl_6 1 . html">Retour vers la page d'accueil 

</A> 

9 Placez-vous maintenant dans la premiere cellule de la premiere 
ligne, et remplacez le contenu texte « ...Une image sera 
placee ici ...» par un element IMG, comme suit : 

<TD rowspan="3"><IMG src="Images/Coucher de soleil.jpg"> 

</TD> 

Remarquez que la balise IMG est depourvue d'element de fermeture : 
son contenu est defini par la valeur de l'attribut src, un URI. Cet 
attribut indique au navigateur ou trouver l'image, comme l'attribut href 
de 1' element A indique ou trouver la ressource liee a une ancre. 



A 



Sensibilite a la casse 

ATT " 1H fl 4 

Respectez avec soin la casse dans l'URI de l'element IMG, comme 
pour tout URI. Certains navigateurs et/ou serveurs sont sensibles a la 
casse des URI. Tous ne l'etant pas, votre site pourrait fonctionner 
parfaitement en local, mais plus du tout une fois en ligne. Une bonne 
habitude consiste a n' employer que des minuscules pour les noms des 
fichiers image. 

Cette sensibilite a la casse etant susceptible de concerner egalement 
1' extension, verifiez celles de vos fichiers image : certains programmes de 
dessin enregistrent automatiquement les fichiers avec une extension en 
majuscules. 



XHTML 

REMARQUE 

En XHTML, cette instruction s'ecrirait : 

<img src="Images/Coucher de soleil.jpg" /> 



10 Enregistrez le fichier sous le nom region1_6_1.html, puis examinez 
cette page dans votre navigateur. 
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REMSR3UE 



Archivez... 

L'habitude prise ici d'attribuer aux fichiers un nom comportant le 
numero de version n'a pour but que d'eviter les recouvrements de 
fichiers et de permettre d'etudier les versions precedentes. Pour un site 
reel, cette methode n'est guere a recommander, la modification des noms 
de fichiers entrainant des risques de liens rompus et imposant de mettre 
continuellement a jour ces liens. Mieux vaut archiver les anciens 
fichiers, puis les modifier sans changer leur nom. 




Figure G. 15 : Insertion d'une image 

L'aspect n'est pas extraordinaire, et ce pour plusieurs raisons. Nous ne 
commenterons pas le choix de 1' image, puisqu'il a fallu employer une 
image preexistante sur la majorite des systemes : le choix est tres limite. 
En revanche, cette image semble de taille un peu exageree, « ecrasant » 
tout le tableau et necessitant un ecran de grande taille. En examinant le 
fichier image, vous voyez que celle-ci mesure 800 x 600 pixels : une 
taille imposante, sans doute demesuree par rapport a nos besoins. II 
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faudrait l'afficher en taille plus reduite. C'est ce que permettent les 
attributs height et width de l'element IMG. 

11 Modifiez comme suit l'element IMG en ajoutant les attributs 

height et width : 

<TD rowspan="3"> 

<IMG src="Images/coucher de soleil.jpg " width="267" 
height="200"> 

</TD> 

1 2 Enregistrez a nouveau le fichier sous le meme nom puis examinez 
la page dans votre navigateur. 



lfc.:fl/G:(HIMpfal«i.^^.il 




Ma : r^L'ii 
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I .:-icc; . l-i:. '■:...:. ,t .yir; 
Trmp. Mai. i IS • 

I. ■...,■ ...i.. M- 1 ^' 






Figure G. 1G : Insertion d'une image a taille determinee 

Nous avons ici divise la taille d'affichage de l'image par 3. L'aspect est 
nettement plus satisfaisant (remarquez que nous avons conserve 
exactement la meme taille de fenetre que pour la capture d'ecran 
precedente). 

Ces deux attributs meritent quelques commentaires supplementaires : 
Leurs valeurs sont exprimees en pixels. 
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Les deux attributs ne sont pas obligatoires si vous souhaitez 
modifier la taille d'une image de facon proportionnelle : ne saisir 
que height="200" suffit a reduire la taille de l'image d'un tiers 
en hauteur et en largeur. La presence des deux attributs permet en 
outre de modifier le ratio de l'image, ce qui est parfois utile. 

Ces attributs ont ete employes ici pour reduire la taille de l'image, 
mais ils auraient tout aussi bien pu servir a l'augmenter. Selon le 
rapport d'agrandissement retenu, attendez-vous a une perte de 
qualite (pixellisation de l'image). 

Lorsque vous incluez ces attributs, la page Web semble se charger 
plus vite : le navigateur est en mesure d'afficher le texte avant 
d' avoir fini de charger la page, car il connait la place a reserver a 
l'image. En leur absence, le visiteur est confronte a une page 
blanche pendant le chargement de l'image, le navigateur ne 
sachant pas la place libre dont il dispose pour afficher le texte. Ce 
phenomene est presque imperceptible en local, mais devient 
evident lorsque la page est telechargee depuis le Web. 

En pratique, vous chargez ici une image d'un « poids » environ neuf fois 
superieur a ce qui est necessaire : 800 x 600 pixels, soit 480 000 pixels, 
alors que vous n'exploitez qu'une image de 266 x 200 pixels, soit 
53 200 pixels. Malgre la compression JPEG, le temps de chargement est 
environ neuf fois superieur aux besoins. Mieux vaut toujours 
redimensionner les images a la taille souhaitee a l'aide d'un programme 
de dessin (nous reviendrons par la suite sur ce theme). En revanche, 
conservez done les attributs height et width pour accelerer l'affichage 
de la page. 

1 3 Lorsque vous inserez une image, vous devez penser aux agents 
utilisateurs non visuels. Servez-vous de l'attribut alt pour 
proposer une alternative textuelle des le debut du chargement de 
l'image : 

<IMG src="Images/coucher de soleil.jpg " width="267" 
height="200" 
alt="Coucher de soleil sur le lac de Linciel"> 

14 Enregistrez a nouveau le fichier sous le meme nom puis examinez 
la page dans votre navigateur. 

L'attribut alt specifie le texte de remplacement qui est restitue si 
l'image ne peut s' afficher. Les agents utilisateurs doivent restituer le 
texte de remplacement quand ils ne gerent pas les images, ne 
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reconnaissent pas un certain type d'image ou ne sont pas configures 
pour les afficher. 

Remarquez qu' Internet Explorer affiche le texte alternatif dans une 
infobulle lorsque le pointeur de la souris est place sur l'image. 
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Retourvers la page d'accueil 
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Figure 6.17 : Image avec texte alternatif 

C'est une des nombreuses erreurs liees au manque de respect d'Internet 
Explorer vis-a-vis de la specification HTML 4.0 1 : la valeur de l'attribut 
alt ne devrait etre affichee que lorsque l' agent utilisateur ne peut 
afficher l'image. Pour afficher un commentaire dans une infobulle, vous 
devez employer l'attribut title. 

15 Servez-vous de l'attribut title pour proposer un commentaire 
affiche dans une infobulle lorsque le pointeur se trouve sur 
l'image : 

<IMG src="Images/coucher de soleil.jpg " 
width="267" height="200" 

alt="Coucher de soleil sur le lac de Linciel" 
title="Un coucher de soleil sur le lac de Linciel"> 

1 6 Enregistrez a nouveau le fichier sous le meme nom puis examinez 
la page dans votre navigateur. 

Remarquez que nous avons volontairement differencie les valeurs des 
attributs alt et title. Tant Internet Explorer que Firefox affichent 
desormais le commentaire dans une infobulle. Internet Explorer 
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n'affiche le contenu d'un eventuel attribut alt qu'en l'absence de 
l'attribut title. 



1 I.L|JJ,II,I,H.IJ..[-,II,IJJJ,IJJJ!I...W n ,. 




Fichier Edition Affichage Favoris Outils ? 




Q Precedents - . - \*\ \£\ ^ Q Rechercher «vV Favors ^$ (A.- ^ E3 - " 




Adresse |£ G:\HTML\Mon5ite\regionl_6J, html jj OK | Liens w 






Ma region 


- 






| h a r- a | 


Ma region est celebre pour ses forets, ses 
rnontagnes et ses lacs 






Les forets 


Les 
rnontagnes 


Les 

lacs 




Donnees 
clirnatologiques 


Ici, une autre image 




lemp. 

Max. 


18 ° 




^HUn cuucher de soleil sur le lac de Linciel ^B 


Temp. mill. 


6,6° 




Hide 


6S2 
rnrn 








zi 




|^|Termine | J Poste de travail 



Figure G. 18 : Emploi de l'attribut title. 
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Figure G. 19 : Emploi de l'attribut title. Tant Internet Explorer que Firefox 
affichent correctement ce commentaire dans une infobulle lorsque le 
pointeur se trouve sur /'image. 
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Vous pouvez egalement recourir a l'attribut longdesc pour relier 
1' image a une description plus detaillee. Cet attribut se comporte comme 
une ancre : 

<IMG src="image. jpgf " alt="Schema du moteur " 
longdesc="schemamoteur . html"> 

L'element IMG possede d'autres attributs qui permettent de jouer sur les 
parametres de restitution d'une image : 

L'attribut align permet d'aligner l'image, de la meme facon que 
pour un paragraphe. Vous pouvez utiliser les valeurs center, 
right ou left. Si vous placez du texte apres le graphisme, 
celui-ci coulera autour de l'image alignee a droite ou a gauche, 
donnant un aspect similaire a celui d'un magazine. 

L'attribut border permet de definir la largeur du cadre entourant 
l'image. En choisissant border="0", l'image sera depourvue de 
cadre. 



6.3. Images animees 



Pour ajouter de l'eclat a une page, il est possible d' utiliser des gifs 
animes. II s'agit d'un type d' image GIF qui peut etre anime en 
combinant plusieurs images en un unique fichier GIF, selon le standard 
defini en 1987 par CompuServe. L'image effectue lors de sa restitution 
un cycle a travers les differentes images elementaires. 

Meme si les animations GIF n'offrent pas le niveau de souplesse et de 
controle propose par d'autres formats d' animation, il a connu et connait 
encore un immense succes largement du au fait qu'il est reconnu par 
1' immense majorite des navigateurs. En outre, les fichiers de gifs animes 
sont generalement plus petits que d'autres fichiers d' animation, comme 
les applets Java. Ce type d'image est souvent employe pour les 
bannieres publicitaires, pour attirer des visiteurs sur une page, mais peut 
egalement servir a attirer 1' attention sur des parties precises d'une page 
ou comme boutons de barre de navigation. 

GIF89a, comme GIF, possede une palette de couleurs comprise entre 2 
et 256 couleurs. Plus la palette est petite et plus le fichier est de petite 
taille. Si votre image GIF n'emploie que 4 couleurs, vous pouvez 
reduire en consequence la palette a 4 couleurs (2 bits) et ainsi diminuer 
la taille du fichier de pres de 75 %. 
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Insertion d'un gif anime 

L'insertion d'un gif anime est strictement identique a celle d'une image 
statique, comme vu precedemment. 

Vous allez maintenant ajouter un gif anime a votre page d'accueil, pour 
mieux attirer 1' attention sur la ligne permettant de vous envoyer un 
courriel. Probleme : vous ne disposez pas d'un tel gif anime. Qu'a cela 
ne tienne, vous pouvez heureusement trouver sur le Net de nombreuses 
images libres de droits, que vous pouvez employer en toute liberte pour 
vos creations. Ouvrez n'importe quel outil de recherche, tapez comme 
mots-cles GIF et gratuit et vous n'avez que l'embarras du choix. 
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Figure 6.20 : 

Une recherche simple procure des 
milliers d'adresses potentielles 



Ouvrez votre navigateur, puis connectez-vous a Internet (si ce 
n'est deja fait). Entrez l'adresse suivante dans la barre d'adresse 
de votre navigateur : http: //gif .webgratuit.com/ 

II s'agit d'une des adresses, choisie presque au hasard, de la 
recherche precedente. II en existe bien d'autres... Dans la fenetre 
qui s'affiche, cliquez dans le cadre du milieu sur Gif/Gif animes. 
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Figure 6.21 : 

Page d'accueil de 
WebGratuit 
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Dans la liste qui s'affiche, choisissez Webdesign (en bas de la 
colonne de gauche), puis Mail (dans la colonne de droite), puis 
enfin BoTtes. La page qui apparait propose differentes images 
animees de boites aux lettres. 




Figure 6.22 : Gifs animes de boites aux lettres 



3 Descendez si necessaire dans la fenetre pour vous placer sur la 
seconde boite aux lettres rouge sur fond noir (nommee 
boites009.gif). Appuyez sur le bouton droit de votre souris et 
choisissez Enregistrer la cible sous... . 
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Figure 6.23 : 

Enregistrement d'un gif 
anime 
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4 Dans la boite de dialogue Enregistrer sous, sans modifier le nom 
de fichier, choisissez le dossier de destination en naviguant 
jusqu'a MonSite/lmages, puis cliquez sur Enregistrer. 

5 Dans le Bloc-Notes, ouvrez le fichier pageacd _6_1 .html. 
Modifiez comme suit la ligne d' envoi de courriel : 

<A href ="mailto : votre_nom@votre_FAI"> 

<IMG src="Images/Boites009 .gif ">Ecrivez-moi ! 
</A> 

6 Enregistrez le fichier sans modifier son nom, puis examinez-le 
dans le navigateur. 
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Figure G.24 : Page d'accueil modifiee 

Vous comprenez pourquoi nous avons choisi un gif a fond noir : pour 
que 1' image se mele agreablement au fond, defini comme noir 
(bgcolor="black"). En revanche, l'aspect n'est pas tres agreable : le 
cadre jaune choque, tandis que la phrase « Ecrivez-moi ! » fait double 
emploi. 

7 Rectifiez comme suit l'element IMG : 

<A href="mailto : votre_nom@votre_FAI"> 

<IMG src="Images/Boites009 .gif " border="0" 
alt="Ecrivez-moi ! "> 

</A> 
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8 Enregistrez le fichier, puis rafraichissez votre navigateur. 
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Fichier Edition Affichage A|ler a Marque-pages Outik 




Figure G.25 : Page d'accueil modifiee 

L' aspect est plus agreable. Vous venez de comprendre en quoi 
l'harmonisation des couleurs d'une page et de celles des elements 
graphiques qui y sont inseres est capitale. 

Prenez garde a toujours selectionner des couleurs en harmonie avec les 
images et les icones de votre page. Une fois les couleurs choisies, vous 
pouvez les appliquer a votre fond, au texte et aux liens hypertextes selon 
vos desks. Inversement, si vous avez deja selectionne les couleurs (ou 
qu'une charte graphique est imposee), soyez prudent dans le choix de 
vos images. 



H Veillez au fond 

Les images GIF peuvent posseder une couleur transparente 
(generalement celle d'arriere-plan), ce qui facilite grandement leur 
insertion sur n'importe quel fond. Tout arriere-plan colore, ou fonde sur 
une image, apparaitra derriere le nouveau dessin. Veillez toutefois a ce 
que 1' image contraste agreablement avec le fond retenu. 
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La selection ou la modification de la couleur transparente s'effectue 
a l'aide de votre logiciel de dessin favori : reportez-vous a sa 
documentation. 



Creation d'un gif anime 

S'il existe sur le Web autant de gifs animes proposes en telechargement 
gratuit, cela n'est pas un hasard : la creation de gifs animes est d'une 
grande facilite, ce qui en a fait un sport international tres prise. Notez 
qu'une image animee est chargee une seule fois, quel que soit le nombre 
de repetitions programmers . 

II a ete dit plus haut qu'il s'agissait d'une succession d'images GIF 
assemblies en un unique fichier GIF : voyez-la un peu comme un dessin 
anime, ou chaque image presente une legere difference avec la 
precedente. En partant d'une premiere image fixe, 




Figure 6.26 : 

Image fixe initiate 

de taille relativement simple, il est assez facile de la dupliquer, de la 
modifier legerement, 




Figure 6. 27 ; 

Image modifiee : la couleur de fond a ete 
changee et definie comme transparente, et 
seul reste un petit « eclair » partant du 
cerveau. 
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de l'enregistrer sous un nouveau nom, et ainsi de suite, jusqu'a disposer 
d'une serie d' images elementaires. 






BureauB. gif 



Figure 6.28 : 

Les differentes images 
elementaires, chacune 
avec un eclair (total ou 
fractionnel) different. II faut 
ensuite les assembler. 



Pour ce faire, vous avez a votre disposition un certain nombre d'outils, 
qui relevent comme a l'habitude des produits commerciaux ou des 
logiciels gratuits. Vous trouverez les adresses menant vers plusieurs 
d'entre eux dans 1' Annexe E, consacree aux ressources Web. J'eprouve 
une legere preference (irrationnelle ?) pour deux d'entre eux, 
probablement due au fait que je les emploie depuis longtemps. Le 
premier, Microsoft Gif Animator version 1.0.0.101, assez ancien (il a ete 
concu pour Windows 95/98), est quelque peu spartiate. Sa simplicite le 
rend toutefois particulierement simple a employer. L' autre, Ulead Gif 
Animator 1.5, egalement ancien (1997) est plus complexe. II dispose en 
particulier d'options interessantes permettant de diminuer la taille du 
fichier resultant... II est frequent que je me serve des deux en 
combinaison, l'un apres 1' autre : vous comprendrez pourquoi un peu 
plus loin. 

Si Ulead Gif Animator 1.5 etait a l'epoque disponible gratuitement, les 
versions ulterieures sont payantes. Une version de demonstration de 
Ulead Gif Animator 5 (49,95 $ pour la version complete), peut etre 
telechargee a l'adresse www.ulead.com. Heureusement, Microsoft Gif 
Animator reste disponible gratuitement, notamment a l'adresse www.zdnet 
.fr/telecharger/windows/fiche/0,39021313,11010272s,00.htm 

Une fois Microsoft Gif Animator telecharge et installe, vous y importez 
successivement les differentes images elementaires. 
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Figure 6.Z9 : 

Microsoft Gif Animator avec les images 
elementaires chargees 

La commence le vrai travail : vous pouvez jouer sur les differents 
parametres. L'onglet Options doit rester en principe inchange. L'onglet 
Animation egalement, sauf en ce qui concerne le reglage Lopping : 
celui-ci determine si 1' animation doit se repeter et, le cas echeant, un 
certain nombre de fois ou indefmiment. Si l'option Loop forever est la 
plus employee, dans certains cas une seule diffusion de 1' animation est 
preferable. 

Sur l'onglet Images, le reglage Duration est le plus important : il definit 
le temps, exprime en centiemes de secondes, pendant lequel est affichee 
l'image elementaire active. En cliquant dans la barre d'outils sur Select 
All, vous pouvez appliquer un parametre a l'ensemble des images, puis 
l'ajuster par la suite pour chaque image. 

II est possible de modifier l'ordre des images mais aussi d'ajouter (ou de 
repeter) ou supprimer des images elementaires. Dans tous les cas, un 
clic sur le bouton Preview permet d'obtenir un apercu de l'image. 




Figure G.30 : 

Apercu de /'animation dans Microsoft Gif Animator 
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Une fois satisfait du resultat, il ne vous reste qu'a enregistrer le fichier 
de gif anime sous le nom et a 1' emplacement de votre choix. 

Nous avons cependant signale qu'il etait important de chercher a 
optimiser en la diminuant la taille de tout fichier telecharge pour une 
page Web. C'est la qu'intervient pour moi Ulead Gif Animator 1.5, 
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Figure G.31 : Ulead Gif Animator 

dont l'utilitaire d'optimisation des gifs animes est remarquable. 




■sque la super-palate 



Cornbisn cs coulsur* voul<fs-V' 
contienne ? 

Remarque : Un plus petit nnmbre de cculsuis perrnellra de 
reduire considerablement la taille final? de votre fichier, mais 
cela pent avoir un eiiet negatir sur la qualite de I'image. 
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Figure 6.32 : 

Un autre ecran de 

I' Assistant Optimisation 

d'Ulead Gif Animator 
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Voulez-vous supprirner les pixels redondante sur les couches 
d'i mages ? 
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Figure 6.33 : 

encore un autre. 
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Figure 6.34 : 

La diversite des ecrans de 
I' Assistant Optimisation 
d'Ulead Gif Animator 
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Taille de lichier Temps de telechargement 






Avant optimisation : 


54,352 octets mm. 13 sec. 






Apres optimisation : 


4.G88 octets min. 1 sec. 






Enregistrement : 


49.744 octets mm. 17 sec. 






Percentage : 
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Figure 6.35 : 

Differents ecrans de /Assistant 
Optimisation d'Ulead Gif Animator 

Remarquez que la taille du fichier a ete tres fortement diminuee : passer 
de presque deux dixiemes de seconde a un centieme de seconde de 
temps de telechargement n'offre rien d'anodin. Soyons tout de meme 
honnete : cela est estime a partir des temps de chargement de l'epoque 
(soit a l'aide d'un modem a 28,8 kbps). Si le rapport de grandeur reste le 
meme aujourd'hui, avec une connexion a 500 kbps (presque le 
minimum d'une connexion cable ou ADSL), les temps de chargement 
sont respectivement 1 centieme de seconde et 0,5 millieme de seconde. 
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Meme si la page comporte cent images animees, la difference est 
presque imperceptible pour l'utilisateur. II demeure toutefois que, par 
respect pour les utilisateurs disposant de connexions plus lentes tant que 
pour preserver la bande passante globale, mieux vaut toujours reduire la 
taille des fichiers telecharges. 

II existe d'autres produits similaires, dont A Smaller Gif, disponible a 
l'adresse www.peda.com/smaller/download.html 



I EEE333E 




Figure 6.36 : 

Optimisation a I aide de A 
Smaller Gif 



Une recherche devrait egalement vous fournir des adresses d'outils en 
ligne. 

Parmi les nombreux autres celebres utilitaires de creation de gifs 
animes, il convient egalement de citer Animated Shop 3 (29 $, mais 
livre gratuitement en accompagnement de l'excellent Paint Shop Pro 9, 
129 $ : www.jasc.com/products/paintshoppro/) et Gif gif giF (www.peda.com 
/ggg/download.html). N'hesitez pas a telecharger les versions de 
demonstration pour vous familiariser avec ces produits et 
eventuellement completer ou remplacer le produit gratuit de Microsoft. 
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Emploi d'icones de puces pour une liste desordonnee 

Vous avez certainement deja remarque de splendides listes, avec des 
puces colorees figurant en tete de chaque membre de la liste. II est facile 
d'en faire autant, meme si cela diverge quelque peu du standard HTML. 
Le recours a une icone de puce « rompt » la structure de la liste, certains 
agents utilisateurs risquant alors de ne pas la reconnaitre comme telle. 
Au lieu d'employer une liste (element UL), placez simplement un 
element saut de ligne (br) apres chaque membre de la liste. Au debut de 
la ligne suivante, inserez votre icone de puce (statique ou animee), par 
exemple comme suit : 

<IMG src="images/puce.gif " height=5 width=5 alt="*"> 

Avec la majorite des navigateurs, vous ne verrez aucune difference 
visuelle avec une « vraie » liste (voir les figures suivantes, presentant 
respectivement une telle liste et le code source correspondant). Meme si 
cela est visuellement attrayant, gardez en memoire qu'il s'agit d'une 
atteinte a la structure du document... 




Figure 6.37 : 

Exemple de liste recourant 
a des icones de puces 
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Figure 6.38 : Fragment du code source de la page precedente 
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6.4. Image cliquable 



Une image cliquable permet de specifier des regions (ou un objet) dans 
1' image et d'affecter une action particuliere a chacune de ces regions 
(par exemple, ouvrir une nouvelle page, lancer un programme, etc.). Un 
clic sur la region (une activation) execute Taction. Pour creer une image 
cliquable, vous associez a un objet (ici a une image) une specification de 
zones geometriques sensibles sur celui-ci. 

Les images cliquables sont de deux types : cote client et cote serveur. 

Cote client : elles sont entierement gerees par 1' agent utilisateur de 
l'utilisateur. En raison de l'absence d'appel au serveur pour 
l'execution cote client, elles s'executent plus rapidement. II est de 
plus possible de les tester en local sur son ordinateur personnel. 
Lorsque l'utilisateur active une region d'une image cliquable cote 
client avec une souris, 1' agent utilisateur interprete les 
coordonnees du pixel. L' agent utilisateur selectionne le lien 
specifie pour la region activee et le suit. 

Cote serveur : quand l'utilisateur active une region d'une image 
cliquable cote serveur, les coordonnees du pixel du clic sont 
envoyees a 1' agent cote serveur, specifie par l'attribut href de 
l'element A. L'agent cote serveur interprete ces coordonnees et 
effectue une certaine action. 

Les images cliquables cote client sont preferees a celles cote serveur pour 
au moins deux raisons : elles sont accessibles aux personnes navigant avec 
des agents utilisateurs non graphiques et elles renvoient une reponse 
immediate quant a la presence du pointeur sur une region active. 

Nous allons examiner tour a tour plus en detail ces deux types. 



Images cliquables cote client : elements 
MAP et AREA 

Les images cliquables cote client ont recours a deux elements, MAP et 

AREA. 

Une image cliquable cote client est specifiee a l'aide de l'element MAP. 
Elle est associee a un autre element (ici IMG, mais ce pourrait etre 
d'autres objets, comme nous le verrons plus tard) via l'attribut u semap 
de celui-ci. 
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Pour voir comment mettre en ceuvre une image cliquable, nous allons 
d'abord rassembler le materiel necessaire : en l'occurrence, une simple 
image de fond de carte, recuperee sur l'excellent site de Sciences-Po. 

1 Ouvrez votre navigateur, puis naviguez jusqu'a l'URI 

www. sciences-po. fr/cartographie/ . 
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Figure 6.39 : 

Site du departement 
Cartographie de 
Sciences-Po 



2 Selectionnez Fonds de cartes, puis dans la page qui s'affiche 
descendez jusqu'a la section Etats et selectionnez la carte France 
(regions). 
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Figure 6.40 : 

Page Fonds de 
cartes 
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Effectuez sur ce fichier un clic avec le bouton droit de la souris et 
choisissez Enregistrer sous. Comme vous l'aviez fait 
precedemment, naviguez jusqu'a votre dossier MonSite/lmages 
pour y enregistrer le fichier (nomme franregs.gif). 

C'est fait : vous disposez d'une image prete a etre transformee en image 
cliquable. Poursuivons en creant la page Web qui va l'employer. 

3 Ouvrez le Bloc-Notes, puis ouvrez le fichier region1_6_1.html. II 
va nous servir de squelette pour creer une nouvelle page. 

4 Modifiez d'abord le contenu de la balise TITLE : 

<TITLE>Ré gions franç aises"> 

5 Supprimez tout le contenu de l'element BODY. 

6 Entrez dans l'element BODY un nouveau titre de niveau 1 : 

<H1 align="center">Carte de France avec 
ré gions</Hl> 

7 Placez-vous en dessous et creez comme suit un element IMG 
inclus dans un element P : 

<PXIMG src="Images/f ranregs .gif " usemap="#f reg" 

alt="Carte de France"> 

</P> 

Remarquez l'ajout dans la balise de l'element IMG d'un nouvel attribut, 
usemap. Celui-ci signale que l'image specifiee par l'URI valeur de 
1' attribut src va etre une image cliquable cote client, definie par un 
element MAP. La valeur de 1' attribut usemap de l'element IMG doit 
correspondre avec celle de l'attribut name de l'element MAP associe. 

8 Ajoutez ensuite dans l'element P, apres l'element IMG, un 
element MAP associe pour le moment vide : 

<MAP name="freg"> 
</MAP> 

La valeur de l'attribut name de l'element MAP correspond bien a celle de 
l'attribut usemap de l'element IMG. 

9 Par securite, enregistrez votre fichier sous le nom FranceReg.html. 

Le second type d' element capital pour une image cliquable est l'element 
AREA. Cet element possede deux attributs : l'attribut shape, qui specifie 
la forme d'une region, et l'attribut coords, qui specifie la position et la 
forme de la region a l'ecran. 



212 LE GUIDE COMPLET 



Image cliquable 



Chapitre 6 



10 Ajoutez ce qui suit dans 1' element MAP : 



<MAP name="freg"> 

<AREA shape="rect" coords="161,263,204,323" 

href="Poitou-Charentes .html" 

alt = "Région Poitou-Charentes" 

title=" Poitou-Charentes " > 
<AREA shape="circle" coords="274,167,21" 

href =" lie de France.html" 

alt="Région lie de France" 

title="Ile de France "> 
<AREA shape=" polygon" 

coords="243, 172, 286, 209, 271, 283, 225, 283, 197, 235, 243, 172" 

href ="Centre . html" 

alt="Région Centre" 

title="Centre"> 
</MAP> 

11 Enregistrez a nouveau votre fichier, puis examinez-le dans votre 
navigateur. 

Remarquez que, lorsque vous deplacez le pointeur sur une des zones 
definies, celui-ci se transforme en main, indiquant la presence d'un lien. 
En outre, si vous le laissez un peu plus longtemps sur la zone, la valeur 
de l'attribut title s'affiche. 



f*"V ,l-r:^...W. ...:/*,.,. ! 



Ciii'tc lit" Fnince tivec regions 




Figure 6.41 : 

Aspect de I'image cliquable 



Si vous cliquez sur une des zones, vous obtenez un message d'erreur : 
les pages secondaires specifiers par les valeurs des attributs 
href n'existent pas ! 
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L'attribut shape accepte quatre valeurs possibles, dont trois sont 
employees dans l'exemple precedent : 

default specifle la region entiere. 
rect definit une region rectangulaire. 
circle definit une region circulaire. 
poly definit une region polygonale. 

Le nombre et l'ordre des valeurs de l'attribut coords dependent de la 
valeur de l'attribut shape, comme le montre le tableau suivant. II s'agit 
d'une liste de valeurs longueur, separees par une virgule. 



Tableau 6.2 . 


Valeurs des attributs shape et coords d'un element AREA 


Valeur de 
I'attribut 

shape 


Formes 


Coordonnees (coords) necessaires 


default 
Rect 


Toute I'image 


Neant 


Rectangle 


En haut a gauche [coordonnees x et y), 
en bas a droite [coordonnees x et y] 


circle 


Cercle 


Centre [coordonnees x et y), rayon 


polygon 


Polygone 


Chaque sommet [coordonnees x et y). le 
dernier couple de coordonnees devrait 
etre identique au premier pour "fermer" 
le polygone. 



Je suppose que vous restez dubitatif quant aux coordonnees de 
l'exemple precedent... Comment est-il possible de les determiner 
simplement ? Deux solutions s'offrent a vous. 

Creation manuelle d'une image cliquable 

La premiere methode est la suivante : 

1 Ouvrez votre programme de dessin habituel et chargez I'image 
concernee (ici, franregs.gif). 

2 Placez votre curseur a 1' emplacement approximatif du coin 
superieur d'un rectangle, a l'emplacement de la region Poitou- 
Charentes. Pratiquement tous les programmes de dessin affichent 
quelque part les coordonnees actuelles du curseur. 
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Fichier Edition Affichage Image Couleurs 
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Pour *i^ b^ =r(-; i » ■ ds I'aide, selectionnez I' option Rubiiques d'aide du menu d'.sids I6u,2:u3 



T 



Figure 6.42 : Les coordonnees de la position actuelle du curseur (ici 
encadrees d'un ovale] dans le logiciel de dessin Microsoft Paint 

Notez ces coordonnees, puis placez-vous sur le coin inferieur 
droit du rectangle pour la region Poitou-Charentes et notez a 
nouveau les coordonnees. Vous disposez des quatre parametres 
necessaires pour la definition d'une forme de type rectangle, que 
vous n'avez plus qu'a reporter dans le code : 

<AREA shape="rect" coords="161 ,263,204 ,323" 

href ="Poitou-Charentes . html" 
alt="Ré gion Poitou-Charentes" 
tit le=" Poitou-Charentes "> 

Remarquez que vous n'obtiendrez pas forcement tout a fait les 
memes coordonnees : quelques pixels de difference ne sont pas un 
probleme, l'indication visuelle procuree a l'utilisateur etant 
essentiellement la modification de la forme du curseur (indiquant 
un lien) ainsi qu'eventuellement l'apparition de l'infobulle defmie 
par l'attribut title. 

Pour le cercle, placez-vous dans la region Ile-de-France au 
centre du cercle, et notez ses coordonnees. Deplacez-vous 
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horizontalement ou verticalement pour definir le rayon souhaite et 
notez la difference entre coordonnees : c'est le rayon. Vous 
disposez des trois parametres necessaires pour la definition d'une 
forme de type cercle, que vous n'avez plus qu'a reporter dans le 
code : 

<AREA shape="circle" coords="274 , 167 ,21" 
href="Ile de France.html" 
alt="Région lie de France" 
title="Ile de France"> 

5 La demarche est un peu plus laborieuse pour un polygone : 
placez-vous sur un des angles de la region Centre et notez ses 
coordonnees. Deplacez-vous successivement sur les autres 
sommets du polygone souhaite et notez leurs coordonnees. 
Lorsque vous en avez termine, reportez toutes ces coordonnees 
dans votre code. Ce pourrait etre comme suit : 

<AREA shape="polygon" 

coords="243, 172, 286, 209, 271, 283, 225, 283, 197, 235, 243, 172" 

href="Centre .html" 
alt="Région Centre" 
title="Centre"> 

Remarquez que le dernier sommet doit etre identique au premier. Si 
toutefois vous ne le specifiez pas, les agents utilisateurs devraient etre en 
mesure de le generer d'eux-memes. 



Le rayon 

REMARQUE _, ' ,, 

Quand la valeur du rayon est un pourcentage, 1 agent utilisateur 
devrait calculer le rayon final par rapport a la hauteur et a fa fargeur de 
l'objet associe. Le rayon devrait etre fa plus petite vafeur des deux. 



Creation d'une image cliquable a I'aide d'un 
editeur 

La deuxieme methode consiste a recourir a un iogiciei de creation 
d'images ciiquabies. If en existe un certain nombre, mais nous vous 
recommandons f incomparable Iogiciei de dessin d'Open Source gratuit, 
The Gimp, qui dispose d'un tel utilitaire integre. 

1 Si vous n'en disposez pas deja, telechargez The Gimp depuis 
http://gimp-win.SOlirceforge.net/ et instaifez-fe sur votre ordinateur. 
C'est ici fa page Windows, mais if existe des versions Linux (fa 
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version originelle) et Mac. Vous aurez egalement besoin de 
l'environnement d'execution GTK +2 : n'oubliez pas de le 
telecharger et de l'installer egalement. 

Lancez The Gimp et chargez l'image Franceregs.gif. 

Choisissez Filtres > Web > Image cliquable (imagemap). 
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Figure 6.43 : 

Creation d'une 
image cliquable 
a I'aide de The 
Gimp 

4 Choisissez Rectangle dans le menu de gauche, puis dessinez un 
rectangle sur la region Poitou-Charentes . 




Figure 6.44 : Utilisez le rectangle 

5 Renseignez les elements necessaires dans la fenetre Parametres 
de la zone qui s'ouvre, puis cliquez sur OK. 
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Figure 6.45 : 

Fenetre Parametres de la 
zone 



Choisissez Cercle dans le menu de gauche, puis dessinez un 
cercle dans la region lle-de-France (attention : The Gimp trace un 
cercle en specifiant le centre, puis en deflnissant le rayon). 
Renseignez les elements necessaires dans la fenetre qui s'ouvre, 
puis cliquez sur OK. 

Choisissez Polygone dans le menu de gauche, puis dessinez un 
polygone dans la region Centre. Renseignez les elements 
necessaires dans la fenetre qui s'ouvre, puis cliquez sur OK. La 
fenetre de The Gimp devrait afficher quelque chose de similaire a 
la figure suivante. 
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Figure B.46 : Image cliquable creee a I aide de The Gimp 
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Remarquez comme il est facile de definir une region polygonale a l'aide 
d'un tel outil ! 

8 Choissez dans le menu Afficher > Source. Vous voyez le code 
source de l'image ainsi creee s'afficher. Vous pouvez copier-coller 
ce code (presente en integralite dans le listing suivant) dans votre 
fichier, pour y ajouter d'autres attributs, comme l'attribut title. 



B^B 



<irns:j SM^Iranregs.gif" widi:h="51C" heighi:="523" border = :, 0" Lisemap="-#rrir:-ip° /> 

<rnap narne="map"> 

#$-;Imags Map rils created by GIMP Imagemap Plugin ■-- 
#$-:GIMP Imagemap Picon by Neurits Rijk — > 

- #$-:Please do nob edit lines starting with "#$" -> 

- #fV£RSION:2.0 --> 
■#$AUTHOR:Fabrice --> 

<5i-ea:tiaps=' , re:tVoord;='':t3,2e&,2:o.,o]7''o!t=' , RegionPoitC'j<har5nLej , 'hieP='Voitou<ri5r 
;>rea snape^" circle" ccn:irds="27::.,i65,20" alt="P.egicm lb de Francs" href= ,! lle de France, html" /: 
:areashape= ,, poly"coords= ,, 243J73.2S5 1 2J.0 1 292,264,2?rj. 1 279,231. 1 230 J 210 J 253 J 191,242,198 J 
:/map> 



±J 



Figure 6.47 : 

Affichage du code 
source de l'image 
cliquable creee par 
The Gimp 



Listing 6-1 : Code source de l'image cliquable creee par The Gimp 



<img 



height="523" border="0' 



src="f ranregs . gif " width="51( 
usemap="#map" /> 
<map name="map"> 

<!-- #$-: Image Map file created by GIMP Imagemap Plugin --> 
<! — #$-:GIMP Imagemap Plugin by Maurits Rijk — > 
<!-- #$-: Please do not edit lines starting with "#$" --> 
<!-- #$VERSION:2.0 --> 
<!-- #$AUTHOR:Fabrice --> 

<area shape="rect" coords="163, 265, 213, 317" 
alt="Region Poitou-Charentes" 
href="Poitou-Charentes .html" /> 
<area shape="circle" 

coords="276, 165, 20" alt="Region lie de France" 
href="Ile de France.html" /> 
<area shape="poly" coords="243, 173, 285, 210, 292, 264, 270, 
279,231,280,210,253,191,242,198,224,221,214,220, 
186,229,177,224,166,24 0,161,243,169,246,173,245,171" 
alt="Region Centre" href="Centre . html" /> 
</map> 

En examinant ce code et en le comparant a celui cree « manuellement » 
a l'aide de Paint, vous voyez que les coordonnees different legerement. 
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Comme nous l'avons deja souligne, cela ne presente pas la moindre 
importance. Remarquez egalement que le polygone est beaucoup plus 
complexe : nous avons suivi presque exactement les frontieres de la 
region Centre. Par ailleurs, The Gimp a ajoute quelques commentaires, 
qu'il est de bon ton de conserver, tandis que son balisage respecte la 
specification XHTML (balises <IMG /> et <AREA />). 

Recouvrement de zones 

Si deux regions deflnies ou plus se chevauchent, le premier element qui 
definit une region dans le document est prioritaire. II est ainsi possible 
de specifier des ancres pour creer des zones inactives dans une image 
cliquable. Dans l'exemple ci-dessous, la premiere ancre specifie une 
petite region circulaire depourvue de lien, tandis que la seconde specifie 
une region circulaire de taille superieure de meme centre que la 
precedente. La combinaison des deux cree un anneau cliquable dont le 
centre est inactif et le bord actif. L'ordre des definitions des ancres est 
capital : le petit cercle doit etre prioritaire par rapport au grand cercle. 

<MAP name="cartel"> 

<P> 

<A shape="circle" coords="100, 200, 50" title="Lien inactif "</A> 

<A href="lien_anneau .html" shape="circle" 

coords="100,200,250" title="Lien actif ".</A> 
</MAP> 

Vous pourriez egalement recourir a l'attribut nohref de l'element AREA 
pour declarer que la region ne possede pas de lien associe : 

<A shape="circle" coords="100, 200, 50" nohref 
title="Lien inactif"</A> 

Vous pourriez souhaiter doter la totalite de 1' image d'un lien. Cela est 
possible en ajoutant un element AREA dont l'attribut shape possede 
comme valeur default. Compte tenu de ce qui est expose plus haut, ce 
dernier element doit se trouver juste avant la balise de fermeture 
</MAP>, de facon que tous les elements AREA precedemment definis 
soient prioritaires. Le code serait ici par exemple : 

<AREA shape="default" HREF="f rancereg. html" 
alt="Carte de France par regions"> 

Les images cliquables sont largement employees pour proposer des 
barres de navigation ressemblant a tout sauf a une barre. Le recours a un 
graphisme plutot qu'a du texte permet d'employer des polices de 
caracteres « exotiques ». C'est une methode largement employee sur les 
sites destines aux enfants. 
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Figure 6.48 : Exemple de site destine a des enfants et recourant a une 
image cliquable pour la navigation 

En conclusion, 1' element MAP peut etre associe a plusieurs elements 
outre IMG : OBJECT et INPUT. II est associe a un element via l'attribut 
u semap de celui-ci. II peut s' employer sans image associee pour des 
mecanismes de navigation generaux. 

Le recours aux elements AREA n'est toutefois pas la seule possibilite 
d'emploi de l'element MAP. Le modele de contenu de celui-ci permet en 
effet d'y placer : 

Un ou plusieurs elements AREA. Ces elements, depourvus de 
contenu, specifient les regions geometriques de l'image cliquable 
et les liens qui sont associes a chaque region. Les agents 
utilisateurs ne restituent pas general les elements AREA : mieux 
vaut fournir un texte de remplacement pour chaque element AREA 
a l'aide de l'attribut alt. 

Un contenu de type bloc compose entre autres d' elements A 
specifiant les regions geometriques de l'image cliquable et le lien 
associe a chaque region. Les agents utilisateurs devraient restituer 
le contenu de type bloc d'un element MAP : cette methode sert a 
creer des documents plus accessibles. 

Un contenu mixte d'elements AREA et d'elements A. En ce cas, les 
agents utilisateurs doivent ignorer les elements AREA. 
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En melangeant les contenus, les agents utilisateurs anciens prendront en 
charge les cartographies specifiees par les elements AREA, tandis que les 
agents utilisateurs recents tireront profit des contenus de type bloc plus 
etoffes. 

Pensez a toujours offrir des alternatives textuelles aux images 
cliquables, au cas ou les graphismes ne seraient pas disponibles ou les 
utilisateurs ne pourraient y acceder. Les agents utilisateurs peuvent 
employer le texte de 1'attribut alt pour creer des liens textuels a la 
place des images cliquables graphiques. De tels liens peuvent etre 
actives de diverses facons (clavier, commande vocale, etc.). 

Sachez enfin que l'element MAP ne presente pas de compatibilite 
descendante avec les agents utilisateurs HTML 2.0 : il sera ignore par de 
tels agents utilisateurs. 



Images cliquables cote serveur 

Plutot qu'une image cote client, il est possible de creer une image 
cliquable cote serveur. Les images cliquables cote serveur peuvent se 
reveler interessantes lorsque l'image cliquable s'avere trop compliquee a 
realiser cote client, mais font peser un poids supplemental sur le 
serveur, ce qui peut etre diversement apprecie. 

Lorsqu'une image cliquable cote serveur est definie pour un element 
IMG, celui-ci doit se trouver dans un element A et posseder 1'attribut 
booleen ismap. 

<P><A href="http : //www. acme . com/cgi-bin/test"> 

<IMG src="jeu.gif " ismap alt="Cible"x/A> 

La difference fondamentale avec une image cliquable cote client est que 
la definition des regions (effectuee dans le cas precedent avec l'element 
MAP) est ici effectuee par un script en ASCII situe sur le serveur. Le 
contenu du fichier de script test.map cite dans l'exemple ci-dessus 
pourrait etre quelque chose comme ceci : 



default .. /index . html 0, 


0, 100, 460 


rect 


. /index . html 0, 1 


100, 65 


rect 


. /servicel . html 0, 


72, 100, 142 


rect 


. /service2 . html 0, 


146, 100, 213 


rect 


./formation. html 0, 219, 100, 283 


rect 


. /prof ils . html 0, 


288, 100, 351 


rect 


. /references . html 


0, 355, 100, 40 


rect 


. /contact .html 0, 


407, 100, 453 



403 
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Les images cliquables cote serveur ont ete developpees a l'origine par 
deux organismes, le NCSA et le CERN. Malgre des efforts certains de 
standardisation, il subsiste quelques petites differences entre eux, ainsi 
qu'au sein de leurs mises en ceuvre. Vous devez verifier le standard 
employe par le serveur Web avant de creer un script d' image cliquable 
cote serveur. L'exemple precedent est au format NCSA, mais voici la 
meme chose au format CERN : 



rect 





1) (100,65) . ./index. html 


rect 





72) 


(100,142) . 


/servicel . html 


rect 





146) 


(100,213) 


. /service2 . html 


rect 





219) 


(100,283) 


. /formation . html 


rect 





288) 


(100,351) 


. /prof ilse . html 


rect 





355) 


(100,403) 


. /references . html 


rect 





407) 


(100,453) 


. /contact .html 


defau! 


t 


. . /index. html 





Lorsque l'utilisateur active un lien en cliquant sur l'image, les 
cordonnees de ce clic a l'ecran sont directement transmises au serveur 
qui heberge le script. Les coordonnees a l'ecran sont exprimees par des 
valeurs en pixels d'ecran relatives a l'image. 

Pour transmettre au serveur le point clique, 1' agent utilisateur derive un 
nouvel URI a partir de l'URI specifie par l'attribut href de 1' element A, 
en lui rajoutant a la fin le caractere « ? » suivi des coordonnees « x » et 
« y », separees par une virgule. Le lien est alors suivi en utilisant le 
nouvel URI. Par exemple, dans l'exemple donne, si l'utilisateur clique 
au point «x=10, y=2 7 », l'URI derive sera <<http://www.acme 
.com/cgi-bin/test?10, 27 ». 

Les agents utilisateurs ne disposant d'aucun moyen de selectionner des 
coordonnees specifiques (par exemple, un agent utilisateur non 
graphique qui s'appuie sur une saisie au clavier, un agent utilisateur 
vocal, etc.), doivent envoyer les coordonnees « 0, » au serveur lors 
de 1' activation du lien. 

En conclusion, mieux vaut ne pas creer d'images cliquables cote 
serveur : celles-ci sont completement inaccessibles aux utilisateurs de 
divers agents utilisateurs comme les navigateurs texte seul et les 
moteurs de recherche comme Google. Si vous devez absolument 
employer des images cliquables cote serveur, ajoutez une barre de 
navigation en texte seul en dessous. Celle-ci doit inclure de vrais liens 
texte vers chacune des pages auxquelles vous pourriez acceder en 
cliquant sur l'image cliquable. 
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Une image cliquable cote serveur ne peut etre definie que pour des 
elements IMG et INPUT, ce dernier devant alors etre de type « image ». 

Pour terminer, si l'element IMG (dont les attributs sont resumes dans le 
tableau suivant) reste present en HTML 4.01, il y est toutefois 
deconseille en raison de ses limites : en effet, il ne repond pas au 
probleme plus general de 1' inclusion des types de medias nouveaux ou a 
venir et entrainent des problemes d'accessibilite. II convient desormais 
de lui preferer l'element OBJECT. 





Tableau B.3 : 


Attributs de l'element IMG 


Attribut 


Valeur(s) 




Effet 


src 


URI 




Fournit I'emplacement de I'image. Cet 
attribut est obligatoire. 


align 


center, 
right 


left, 


Place I'image respectivement au 
centre, a droite ou a gauche. Peut 
autoriser le deroulement du texte 
autour du graphisme. 


border 


Nombre 




Taille du cadre de I'image, exprimee 
en pixels (0 pour pas de cadre]. 


alt 


Texte de description 


Procure une alternative textuelle au 
graphisme. 


usemap 


Valeur de I'attribut 
name d'un element 
map associe 


Signale que cette image est une 
image cliquable cote client, definie par 
l'element map associe. 


ismap 


Neant 




Signale que cette image est une 
image cliquable cote serveur. 



6.5. Inclusion generique d'images : 
element OBJECT 

Pour inclure des images, les auteurs devraient desormais privilegier 
l'element OBJECT. II s'agit d'un element de type ligne, devant 
obligatoirement posseder une balise d'ouverture et une balise de 
fermeture, contrairement a IMG qui ne possedait pas de balise de 
fermeture. 

En effet, la plupart des agents utilisateurs possedent des mecanismes 
integres pour la restitution des types de donnees communs, tels que le 
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texte, les images GIF, les couleurs, les polices et une poignee d' elements 
graphiques. Pour restituer les types de donnees qu'ils ne reconnaissent 
pas nativement, les agents utilisateurs lancent en general des 
applications externes. L'element OBJECT permet aux auteurs de mieux 
controler si les donnees doivent etre restituees de maniere externe ou par 
un certain programme, specifie par l'auteur, qui restitue ces donnees au 
sein de 1' agent utilisateur. 

Voici comment employer l'element OBJECT pour inclure une image. 

1 Ouvrez le Bloc -Notes, puis ouvrez le fichier region1_6_1.html. 

2 Modifiez d'abord la version du document : 

<META name ="version" content="l . 6 .2"> 

3 Remplacez l'element IMG par ce qui suit : 

<OBJECT data="Images/coucher de soleil.jpg" 

type="image/gif " width="267" height="200" 

title="Un coucher de soleil sur le lac de Linciel"> 

</OBJECT> 

4 Enregistrez votre fichier sous le nom region1_6_2.html, puis 
examinez-le dans votre navigateur. 
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Figure G.49 : Inclusion d'image a I'aide de /'element OBJECT 

Visuellement, le recours a l'element OBJECT plutot qu'a l'element IMG 
ne produit aucune difference (reportez-vous a la figure de la page 242 
pour comparer). Revenez au code pour l'examiner a nouveau. Le nouvel 
element possede deux nouveaux attributs : 
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L'attribut data de l'element OBJECT remplace l'element src de 
l'element IMG : c'est un URI, pouvant etre interprete relativement 
a la valeur de l'attribut optionnel codebase et qui Test par defaut 
relativement a l'URI de base du document. 

L'attribut type specifie le type des donnees specifiees par l'URI 
de l'attribut data. Cet attribut facultatif est toutefois 
recommande : il evite le chargement par 1' agent utilisateur 
d' informations dont il ne peut reconnaitre le type de contenu. Si la 
valeur de cet attribut differe de l'en-tete HTTP Content-Type 
renvoye par le serveur quand l'objet est renvoye, c'est l'en-tete 
HTTP Content-Type qui a priorite. 

Remarquez egalement que nous avons supprime l'attribut alt et sa 
valeur. En effet, une des caracteristiques les plus interessantes de 
l'element OBJECT est qu'il fonctionne un peu comme la classique 
instruction si...sinon (if... else). Autrement dit, il peut posseder un 
contenu interprete uniquement s'il est impossible d'interpreter le 
contenu de sa balise d'ouverture. Pour disposer d'un texte alternatif 
affiche au cas ou l'agent utilisateur ne peut interpreter l'image, procedez 
comme suit : 

5 Modifiez l'element OBJECT en inserant le texte ci-dessous juste 
avant la balise de fermeture </OBJECT> : 

<OBJECT data="Images/coucher de soleil.jpg" 

type="image/gif " width="267" height="200" 

title="Un coucher de soleil sur le lac de Linciel"> 

<!— Si l'image ne peut etre affichee, afficher le texte --> 

Coucher de soleil sur le lac de Linciel 

</OBJECT> 

6 Enregistrez a nouveau votre fichier, sous le meme nom. 

En l'examinant dans votre navigateur, vous ne constaterez aucune 
difference. Cette syntaxe semble n'etre qu'une nuance, mais elle prend 
toutefois tout son sens lorsque vous savez qu'il est possible d'imbriquer 
des elements OBJECT, ainsi que d'employer ceux-ci pour specifier bien 
d'autres types de contenus, dont des scripts. Prenons un exemple. 

1 Ouvrez le fichier FranceReg2.html. 

2 Modifiez d'abord la version du document : 

<META name ="version" content="l . 6 . 3"> 
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3 Modifiez comme suit le contenu de la premiere cellule du tableau. 
Attention, veillez a bien refermer les elements OBJECT que vous 
allez ajouter a la fin du fragment du code : 

<TD rowspan="3"> 

<!-- Essayer d' abord un applet en Python --> 
<OBJECT title="Coucher de soleil sur le lac de Linciel" 
classid="Linciel • py"> 
<!-- Sinon, essayer 1' animation MNG --> 
<OBJECT data="Linciel .mng" type="application/mng"> 
<!-- Sinon, essayer 1' image JPEG --> 
<OBJECT data="Images/coucher de soleil.jpg" 
type="image/gif " width="267" height="200" 
title="Un coucher de soleil sur le lac de Linciel"> 
<!-- Sinon, le texte en dernier recours --> 
Coucher de soleil sur le lac de Linciel 
</OBJECT> 
</OBJECT> 
</OBJECT> 
</TD> 

4 Enregistrez votre fichier sous le nom region1_6_3.html, puis 
examinez-le dans votre navigateur. 
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Figure G.50 : Possibilites alternatives a I'aide de /'element OBJECT 

Le navigateur etant pour le moment incapable d'interpreter un script 
Python ou une animation MNG (souvenez-vous : c'est le format 
d' animation derive de PNG), il affiche la premiere possibilite reconnue, 
ici l'image JPEG. Remarquez que Firefox signale par une barre de 
message que cette page necessite des modules complementaires (plug- 
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ins) et propose d'essayer de les installer. Nous reviendrons dans le 
Chapitre 10, consacre aux scripts, sur l'emploi de l'element OBJECT 
avec les scripts. 

Vous voyez ici une partie de la souplesse fantastique offerte par cet 
element. Le reste ne depend que de votre imagination. 

Bien evidemment, cet element permet egalement l'insertion d'images 
cliquables, cote client ou cote serveur. Commencons par une image 
cliquable cote client. 

1 Revenez au fichier regionl _6_2.html. 

2 Modifiez d'abord la version du document : 

<META name ="version" content="l . 6. 3"> 

3 Modifiez le code comme suit. Attention, n'oubliez pas de refermer 
l'element OBJECT apres la fermeture de l'element MAP ! 

<p> 

<OBJECT data="Images/franregs .gif " da tatype=" image/GIF" 
usemap="#freg"> 

<MAP name="freg"> 
<P>Quelques precisions 

<A href ="Poitou-Charentes . html" shape="rect" 

coords="161, 263, 204, 323" title="Poitou-Charentes"> 
R&eacute ;gion Poitou-Charentes</A> 
<A href="Ile de France.html" shape="circle" 
coords="274, 167, 21" title="Ile de France"> 
R&eacute ;gion lie de France</A> 
<A href ="Centre . html" shape="polygon" 

coords="243,172,2 8 6,2 9,271,2 83,225,2 83, 
197,235,243,172" alt=" " title="Centre"> 
R&eacute ;gion Centre</A> 
</MAP> 
</OBJECT></P> 

Remarquez que l'element MAP est « dissimule » dans le contenu de 
l'element OBJECT. Nous ne voulons pas restituer le contenu de 
l'element MAP lorsque l'element OBJECT est restitue. II ne le sera que si 
l'element OBJECT ne peut l'etre. 

4 Enregistrez votre fichier sous le nom FranceReg3.html, puis 
examinez-le dans votre navigateur (voir Figure 6.51). 
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Cette figure ne differe en apparence en rien de la version IMG (reportez- 
vous a la figure de la page 242). Nous allons simuler un agent utilisateur 
incapable d'interpreter l'image, en modifiant le nom et le type de 
1' image : 



■ Demurrage Drsrniisri-ss nouvdlis* ... Credit AgHrole : fe rriagirthegathering... 

Carte de France avec regions 




Figure B.51 : 

Image cliquable a 
I'aide de /'element 
OBJECT 



5 Modifiez comme suit I'element OBJECT : 

<OBJECT data="Images/f ranregs .mng" 

datatype=" image /MNG" usemap="#f reg"> 

6 Enregistrez votre fichier sous le nom FranceReg3err.html, puis 
examinez-le dans votre navigateur. 
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L'image ne pouvant etre affichee, vous voyez a la place un menu 
textuel. 

Vous pourriez souhaiter que l'image cliquable soit restituee meme si 
1' agent utilisateur est incapable de restituer l'element OBJECT. Par 
exemple, en associant une image cliquable a un element OBJECT et en 
placant une barre de navigation textuelle en bas de page. Pour cela, 
placez l'element MAP en dehors de l'element OBJECT : 

Listing 6-2 : Element MAP restitue 

<HTML> 

<BODY> 

<H1 align="center">Carte de France avec regions</Hl> 
<P> 

<OBJECT data="Images/f ranregs .mng" 

da tatype=" image /MNG" usemap="#f reg"> 
</OBJECT> 
</P> 

. . . reste du corps 
<MAP name="freg"> 

<P>Quelques precisions : 

<A href="Poitou-Charentes . html" shape="rect" 
coords="161,2 63,204,323" 
title="Poitou-Charentes"> 
Ré gion Poitou-Charentes</A> 
<A href="Ile de France.html" shape="circle" 
coords="274, 167,21" title="Ile de France"> 
Ré gion lie de France</A> 
<A href ="Centre . html" shape="polygon" 
coords="243,172,2 8 6,2 9,271,2 83,225, 

283, 197, 235, 243, 172" title="Centre"> 
Ré gion Centre</A> 
</MAP> 
</BODY> 
</HTML> 

La figure suivante montre 1' aspect de cette page dans un navigateur (voir 
Figure 6.53). 

Comme avec l'element IMG, vous pouvez creer une image cliquable en 
employant des elements AREA. 

1 Ouvrez le fichier FranceReg.html. 

2 Modifiez d'abord la version du document : 

<META name ="version" content="l . 6 . 4"> 
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Figure B.53 : 

Affichage simultane de I'image 
cliquable et de liens textuels 



3 Remplacez 1' element IMG par un element OBJECT, comme suit : 

<p> 

<OBJECT data="Images/franregs .gif " datatype=" image/GIF" 

s* usemap="#freg"> 

<P> Carte des France avec régions 

</OBJECT> 

</P> 

4 Enregistrez votre fichier sous le nom FranceReg4.html, puis 
examinez-le dans votre navigateur (voir Figure 6.54). 

Une fois encore, cette figure ne differe apparemment en rien de la 
version IMG (reportez-vous a la figure de la page image06_34 ). 

La presence de l'attribut usemap sur un element OBJECT implique que 
l'objet inclus soit une image cliquable cote client associee. En ce cas, 
1' agent utilisateur peut produire une interaction utilisateur avec cet 
element OBJECT, uniquement en fonction de I'image cliquable cote 
client. Ceci permet a certains agents utilisateurs comme les navigateurs 
vocaux ou les robots d'interagir avec l'element OBJECT sans devoir le 
traiter. L' agent utilisateur peut meme choisir de ne pas ramener (ou 
traiter) l'objet. Lorsqu'un element OBJECT possede une image cliquable 
associee, vous ne devez pas supposer que l'objet sera traite par tous les 
agents utilisateurs. 
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Figure 6.54 : 

Image cliquable a 
I'aide de /'element 
OBJECT et 
d elements AREA 



L'element OBJECT peut aussi apparaitre comme contenu de 1' element 
HEAD. Les agents utilisateurs ne restituant generalement pas les elements 
places dans la section HEAD, veillez a ce qu'aucun element OBJECT situe 
dans la section HEAD ne specifie un contenu qui peut etre restitue. 

Le Chapitre 7, traitant des jeux d'encadrement, propose un exemple 
d'inclusion d'element OBJECT dans l'element HEAD. De meme, le 
Chapitre 9, traitant des formulaires, procure quelques precisions sur 
l'emploi d'elements OBJECT dans les formulaires. 



Tableau 6.4 : Principaux attributs de /'element OBJECT relatifs aux images 


Attribut 


Valeur(s) 


Effet 


data 


Uri 


Specifie la localisation des donnees de I'objet, 
par exemple les donnees d'images pour les 
objets definissant des images ou, plus 
generalement, la forme serialisee d'un objet 
qui peut etre utilisee pour recreer cet objet. 


type 


type-de-contenu 


Facultatif. Specifie le type de contenu des 
donnees specifiees par I'attribut data. 


usemap Neant 


Signale que I'objet associe est une image 
cliquable. 
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Tableau B.5 : Attributs de /'element OBJECT 


Attribut Valeur(s) 


Effet 


classid Uri 


Specifier la localisation de I'implementation 
d'un objet via un URI. Peut etre employe en 
combinaison ou en remplacement de 
I'attribut data, selon le type de l'objet 
implique. 


codebase Uri 


Specifie le chemin de base qui sert a la 
resolution des URI relatifs specifies par les 
attributs classid, data et archive. 
Quand il est absent, sa valeur par defaut 
correspond a I'URI de base du document 
courant. 


codetype type-de-contenu 


Specifie le type de contenu des donnees 
attendues lors du chargement de l'objet 
specifie par I'attribut classid. Cet attribut 
est optionnel, mais recommande lorsque 
I'attribut classid est specifie. II permet en 
effet a I'agent utilisateur d'eviter le 
chargement des informations dont les 
types ne sont pas reconnus. Quand il est 
absent, sa valeur par defaut est celle de 
I'attribut type. 


data Uri 


Specifie la localisation des donnees de 
l'objet, par exemple les donnees d'images 
pour les objets definissant des images, ou 
plus generalement, la forme serialisee d'un 
objet qui peut etre utilisee pour recreer cet 
objet. 


type type-de-contenu 


Facultatif. Specifie le type de contenu des 
donnees specifiees par I'attribut data. 


archive liste-uri Specifie une liste d'URI, separes par des 

espaces, des archives contenant les 
ressources concernant I'objet. Cette liste 
peut inclure les ressources specifiees par 
les attributs classid et data. Le 
prechargement des archives diminue 
generalement le temps de chargement des 
objets. Les archives specifiees comme URI 
relatifs devraient etre interpreters 
relativement a I'attribut codebase. 


declare Quand il est present, la definition de 

I'element object courant n'est qu'une 
declaration. L'objet doit etre instancie par 
la suite via une definition object qui se 
refere a cette declaration. 
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Tableau B.5 


Attributs de /'element OBJECT 


Attribut 


Valeur(s) 


Effet 


standby 


texte 


Specifie le message que I'agent utilisateur 
peut restituer pendant le chargement de 
i'implementation et des donnees de I'objet. 



Diminution du temps de telechargement 

Comme cela a deja ete souligne, le temps de chargement d'une page est 
proportionnel au nombre et a la taille des graphismes employes sur cette 
page. L'emploi des illustrations doit done etre judicieusement mesure. 

Heureusement, plusieurs methodes permettent d'ameliorer le temps de 
chargement d'une page, meme si elle contient des illustrations. 

Reduction de la taille physique des images 

La premiere methode consiste a employer des images de plus faible 
taille, ajustees a la resolution envisagee pour la page Web. Une erreur 
frequente consiste a employer des nchiers image « tels quels » et a 
modifier la taille d'affichage a l'ecran. Cette erreur devient de plus en 
plus frequente avec le developpement de la photo numerique, dont le 
pouvoir de resolution augmente d' annee en annee, mais elle se rencontre 
aussi lors de l'emploi de documents numerises a l'aide d'un scanner. 

II y a parfois de quoi se perdre dans la jungle des unites de mesure 
employees par les dispositifs d'acquisition d'images (scanneurs, 
appareils photo et cameras numeriques) et de restitution (imprimantes, 
tables tracantes, flasheuses). 

Le terme le plus employe est celui de dpi (dots per inch) : e'est le 
nombre de points sur un pouce, soit 2,54 cm. Ce terme est employe pour 
les scanneurs et les imprimantes. De nos jours, une resolution 
d'impression de 600 dpi est un minimum, une resolution de 2 400 dpi 
n'offrant plus rien d'exceptionnel. Sachez cependant que les limites sont 
proches : les professionels de l'imprimerie ne depassent que rarement 
3 600 dpi pour des reproductions d'art, en employant des papiers 
speciaux fort onereux. Une resolution superieure n'apporte rien et peut 
meme degrader le rendu final. 
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Les imprimantes noir et blanc (comme les imprimantes laser 
« ordinaires ») fonctionnent en tons de gris : chaque pixel de l'image de 
depart est traduit en carre de 16 pixels (4 X 4) afin de pouvoir afficher des 
teintes differentes. La resolution est done en fait divisee par 4 par rapport 
a un dessin au trait (bien qu'elle puisse etre augmentee de facon logicielle 
par rimprimante). Cette organisation se faisant horizontalement, 
1' appellation correcte devrait etre lpi (ligne par pouce) au lieu de dpi. 

En revanche, les appareils photo numeriques parlent le plus souvent en 
nombre total de pixels (4, 5 ou 6 millions pour les modeles les plus 
perfectionnes), tandis que les ecrans melangent la notion de diagonale de 
l'ecran (15, 17 ou 19 pouces) et de resolution (800x600, 1024x768, 
1280 x 960 ou 1280 x 1024, etc.). Pas facile de comparer, surtout en 
tenant compte du fait que, pour un moniteur cathodique, l'ecran affiche 
est generalement plus petit que la taille physique de l'ecran ! 



Appareils photo numeriques : 4 millions de pixels, e'est beaucoup ! 

Oui et non . . . Grossierement et traditionnellement, une photo presente 
un rapport largeur/hauteur de 3/2 (en mode pay sage, e'est-a-dire horizon- 
talement. C'est l'inverse en mode portrait). Autrement dit, vous avez : 

resolution =31x21 

D'ou 

1 = (resolution/6) V2 

Avec une resolution de 4 millions de pixels, vous obtenez : 

1 = (4 000 000/6) 1 /2 = (2 666 666) 1 /2 = 816,5 pixels 

Une photo obtenue avec un appareil photo d'une resolution de 4 millions 
de pixels possede done une largeur d' environ 2 449 pixels et une hauteur 
de 1 633 pixels. Autrement dit, imprimee avec une imprimante atteignant 
une resolution de 1 200 points par pouce, pour conserver cette resolution, 
la photo obtenue mesurerait environ 2 pouces par 1,4 pouces, soit 5 cm 
par 3,5 cm... Pas tres grand ! 

En revanche, si vous imprimez avec une resolution de 350 dpi (par 
exemple), la photo atteindra 17,7 x 12 cm : c'est plus raisonnable. 

Comprenez bien toutefois que si, partant de cette photo de 4 millions de 
pixels placee dans un logiciel et ayant defini une taille d'impression de 
17,7 x 12 cm, meme en selectionnant une resolution d'impression de 
1 200 dpi, la vraie resolution de la photo imprimee (pas celle de 
l'impression elle-meme) ne sera que de 350 dpi ! Les points 
supplementaires ont ete obtenus par extrapolation... 
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Mieux vaut done convertir cette resolution theorique en nombre de 
points : si vous considerez une photo normale de format 24 x 1 8 cm, soit 
9,6 x 7,2 pouces, avec une resolution de 1 200 points par pouce vous 
avez imprime (9,6 x 1 200) x (7,2 x 1 200) = 99 532 800 points : plus de 
99,5 millions de points ! Nous sommes loin des 4 millions de pixels de 
la photo obtenue avec l'appareil photo numerique... 

Le probleme est toutefois totalement different si vous affichez votre 
photo numerique a l'ecran : avec la resolution actuelle la plus frequente 
de 1 024 x 768, une telle photo occuperait une superficie equivalente a 
presque 5 ecrans (presque 2,4 ecrans en largeur et un peu plus de 2 en 
hauteur). Elle est done totalement inexploitable en l'etat sur une page 
Web. 



Tableau 6.6 : 


Resolution et part de marche des ecrans 
(source : 0neStatjuin200B] 


mondiaux en 200B 


Resolution 


Nombre total 
de points 


Resolution en dpi 
(selon la taille de 
l'ecran, de 15 a 
19') 


Part de 
marche 2006 


1 024 x 7B8 


786 432 


73 a 81 dpi 


56,1 % 


1 280 x 
1 024 


1 310 720 


91 a 108 dpi 


15,8% 


800 x BOO 


480 000 


57 a 62 dpi 


1 2,0 % 


1 152x864 


949 248 


82 a 91 dpi 


54,0 % 



Le probleme est similaire lorsque vous voulez placer sur votre site une 
image provenant d'un scanneur a plat. Si la numerisation est effectuee 
dans le but d'une impression, vous devez choisir une resolution d'entree 
egale au produit de la resolution de sortie par le rapport de taille 
souhaite par rapport a 1' original. Par exemple, avec une imprimante 
reglee sur 600 dpi et un rapport d'impression du double de l'original, 
vous aurez : 600 x 2 = 1200 dpi. 

En revanche, en vue d'un affichage ecran, une resolution d'entree de 75 
dpi est largement suffisante, voire exageree, puisqu'il est exceptionnel 
qu'une image occupe tout l'ecran : tout depend encore une fois du 
rapport de taille entre l'original et ce que vous souhaitez obtenir a 
l'ecran. 
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Nous n'irons pas plus loin dans l'etude des scanneurs et autres 
peripheriques d'acquisition ou de restitution d'images, ce theme sortant 
du champ de cet ouvrage. 

En reprenant toutefois notre exemple d'image numerique, celle-ci codee 
en vraies couleurs (32 bits par pixel) devrait occuper 32 x 4 millions = 
128 millions de bits, soit, converti en octets, environ 16 Mo... 

Heureusement, les principaux formats de fichiers graphiques operent 
une compression des donnees aboutissant a une reduction de la taille des 
fichiers. 

Reduction de la taille des fichiers 

Vous savez toutefois probablement que les fichiers graphiques peuvent 
etre trouves sous differentes formes, reconnaissables a l'extension du 
nom de fichier : JPG, GIF, PNG, TIF, BMP, etc., et que ces formats 
realisent une compression logicielle des donnees plus ou moins efficace. 

A titre d'exemple, le tableau suivant presente une comparaison de la 
taille des fichiers de 1' image exemple de Coucher de soleil employee 
dans notre page Region, qui mesure 800 x 600 pixels, selon le format de 
fichier employe. 



Tableau B. 7 . 


Comparaison de quelques formats de fichiers graphiques 


Type 


Nbre 
bit/pixel 


Couleurs 


Taille en 
memoire 


Taille reelle du 
fichier 


JPG 
PNG 


24 
24 




16 
millions 


1 406 Ko 


70 Ko 




16 
millions 


1 406 Ko 


532 Ko 


TIF 


24 




16 
millions 


1 406 Ko 


1 254 Ko 


BMP 


24 


16 
millions 


1 406 Ko 


1 407 Ko 


TIF 


16 




64 000 


703 Ko 


551 Ko 


PNG 


16 


64 000 


703 Ko 


378 Ko 


TIF 


a 




256 


469 Ko 


194 Ko 


PNG 


8 




256 


469 Ko 


163 Ko 
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Tableau 6. 7 : Comparaison de quelques formats de fichiers graphiques 

Taiile reelle du 
fichier 

251 Ko 

59 Ko 

49 Ko 

49 Ko 



Type 


Nbre 
bit/pixel 


Couleurs 


Taiile en 
memoire 


GIF 


8 


256 


469 Ko 


TIF 


4 


16 


234 Ko 


PNG 


4 


16 


234 Ko 


GIF 


4 


16 


234 Ko 



Remarquez tout d'abord que la taiile en memoire correspond bien au 
calcul theorique : 

800 X 600 X 24 = 11 524 000 bits = 1 440 000 octets = 1 406 Ko 

Cette resolution ne permet pas le format GIF, qui n' accepte pas plus de 
256 couleurs. En revanche, le format BMP la reconnait : comme vous le 
voyez, il n'effectue aucune compression. Ce format n'est d'ailleurs pas 
reconnu sur le Web, pas plus que le format TIF : ils ne sont la que pour 
permettre la comparaison. Dans cet exemple, le fichier JPEG est de loin 
le plus petit. 

La premiere possibilite pour reduire la taiile de ce fichier sans modifier 
le format de l'image consiste a reduire le nombre de couleurs, pour 
passer a 64 000 couleurs. Cela elimine le format JPEG, obligatoirement 
en 16 millions de couleurs. Nous restons toutefois loin de la taiile du 
fichier JPEG, malgre cette baisse de qualite. Poursuivons en passant en 
256 couleurs, pour pouvoir tester le format GIF. 

Si les fichiers restent de taiile superieure a celui d'un fichier JPEG en 16 
millions de couleurs, le format GIF se revele le plus gourmand parmi les 
autres. Poussons le raisonnement a son terme en reduisant radicalement 
le nombre de couleurs a 16 (soit 4 bits par couleur). 

La taiile des fichiers poursuit sa reduction, passant cette fois en dessous 
de celle du fichier JPEG. II est toutefois permis de s'interroger sur la 
pertinence d'une telle reduction de qualite, pour ne gagner que 30 % en 
taiile ! 

Sachez toutefois que les chiffres presentes ici sont propres a cette 
image : une autre image pourrait dormer des resultats differents, le 
format GIF pouvant s'averer plus interessant en 256 couleurs. II reste 
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cependant important de noter que, inversement, la conversion d'un 
fichier GIF en JPEG apporte parfois une grande amelioration ! 

Tout dependant des caracteristiques du fichier, seuls les essais et 
1' experience pourront vous procurer un indice. 

II existe par ailleurs plusieurs programmes permettant de reduire la taille 
des images JPEG avec une perte de qualite minimale. C'est le cas de 
Paint Shop Pro. 
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Figure G.55 : Paint Shop Pro permet de reduire la taille d'une image JPG 

SmartSaver 3.0, concu par Ulead, est plus facile a employer. Vous 
pouvez en telecharger une version d' evaluation depuis le site www.ulead 
.COm/webutilities/frwhere.htm Cet utilitaire realise un extraordinaire travail 
d'ajustement de compression en comparant les resultats selon les 
reglages et les types de fichiers. Deux fenetres permettent de comparer 
1' original, a gauche, et la version compressee, a droite, en taille et en 
qualite. Les effets des differents reglages sautent immediatement aux 
yeux : au prix d'une baisse de qualite perceptible, mais somme toute 
acceptable, la taille du fichier passe de 71 a 41 Ko ! (voir Figure 6.56) 

SmartSaver propose des outils pour recadrer et modifier la taille des 
images : ainsi, tous les outils necessaires pour ameliorer le chargement 
d'une image sont-ils a la portee de main. 
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Figure B.5G : Reduction de la taille d'une image avec SmartSaver 3.0 



Recours a une page de vignettes 

Pour afficher un groupe d'images de qualite photographique, une 
solution astucieuse consiste a creer une page qui presente des reductions 
de ces images, appelees vignettes ou miniatures (thumbnail). Chaque 
vignette est reliee a 1' image en taille reelle. Ceci permet aux visiteurs de 
voir ce qui est disponible avec une perte de temps minimale en 
chargement, et ils peuvent ainsi voir uniquement les images qui les 
interessent. 



6.6. Resume 



La toute premiere etape de l'enjolivement d'une page consiste a y 
aj outer de la couleur. 

Exploiter les couleurs est de la plus grande simplicite en HTML, 
grace a divers attributs de l'element BODY. 

La valeur hexadecimale employee pour specifier une couleur 
porte le nom de code RGB de cette couleur. 

Vous modifiez la couleur du texte pour ou dans un element grace 
a l'attribut color d'un element FONT. Vous modifiez la couleur 
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du fond des elements d'un tableau a l'aide de l'attribut bgcolor 
de l'element concerne. 

Les couleurs peuvent etre desactivees par l'utilisateur. Tous les 
navigateurs ou presque possedent desormais des options de 
gestion des couleurs ou autorisent les utilisateurs a definir un 
ensemble particulier de couleurs a utiliser pour tout site visite. 
Tous ces attributs sont desormais deconseilles, au profit des 
feuilles de style. 

II est possible de placer des images sur un site Web. Les formats 
de fichiers graphiques les plus frequents sont GIF (Graphic 
Interchange Format), JPEG (Join Photographic Experts Group) et 
PNG (Portable Network Graphic). Pour pouvoir diffuser sur votre 
site une image, vous devez avoir le droit de le faire : elle est libre 
de droits, vous avez obtenu 1' accord de son proprietaire ou vous 
en etes vous-meme l'auteur. 

Vous inserez une image d'arriere-plan pour la totalite de la page 
dans l'element BODY a l'aide de l'attribut background. 

Vous inserez une image dans un element HTML a l'aide des 
elements IMG et OBJECT. Ce dernier element, plus puissant, est 
desormais a privilegier. 

Vous pouvez employer des images statiques ou des images 
animees (gifs animes). Vous pouvez creer vos propres images 
animees. 

II est possible de creer et d'inserer des images cliquables : un clic 
sur une portion de l'image declenche une action, souvent (mais 
pas toujours) l'ouverture d'une nouvelle page. Vous employez 
pour ce faire les elements MAP et AREA, associes a des elements 

IMG OU OBJECT. 

De facon generale, mieux vaut toujours chercher a diminuer le 
temps de telechargement d'une page Web. Vous devez veiller a 
bien controler la taille de vos images. Un choix judicieux du 
format de fichier, ainsi que le recours a certains utilitaires, peut 
permettre de reduire sensiblement la taille des fichiers concernes, 
sans perte de qualite visuelle. 
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Les cadres ou frames sont largement employes en HTML. lis constituent le 
principal moyen d' afficher de multiples pages HTML sur le meme ecran au 
meme moment. Vous pourriez ouvrir plusieurs fenetres ou onglets sous votre 
navigateur, mais seriez alors contraint de basculer constamment de l'un a 
1' autre. Grace aux cadres, il est possible de concevoir un site qui presente 
aux utilisateurs plusieurs fenetres. Ces fenetres d' information doivent 
cependant etre liees : les utilisateurs ne doivent pas avoir 1' impression de 
perdre une place precieuse pour des elements sans importance. 

Les cadres sont frequemment employes pour controler la navigation de 
l'utilisateur sur le site. Des etudes ont demontre qu'une barre de 
navigation ou un menu n'etaient utiles qu'a condition d'etre situes en 
haut d'un document. Beaucoup d' utilisateurs du Web ne font jamais 
defiler l'ecran vers le bas : les eventuelles barres de navigation situees 
en bas d'une page doivent done etre des repliques de celles du haut. 
Mieux vaut recourir a un cadre pour placer definitivement les outils de 
navigation a un endroit bien defini de l'ecran. 

Des cadres permettent de presenter les documents selon des vues multiples : 
des fenetres independantes ou des sous-fenetres. C'est un moyen de garder 
visibles certaines informations, tandis que d'autres fenetres defilent ou sont 
remplacees. Par exemple, dans la meme fenetre, un cadre pourrait afficher 
une banniere statique, un deuxieme cadre afficher un menu de navigation et 
un troisieme le document principal qui peut defiler ou etre remplace au gre 
de la navigation via le deuxieme cadre. 

Ce chapitre montre comment construire un jeu d'encadrement ou 
frameset, aussi nomme « ensemble de cadres ». Cela s'effectue par le 
biais d'un fichier qui definit les cadres, le mode d'ouverture d'une page 
dans un cadre en utilisant le lien present dans un autre, et la facon 
d'utiliser les elements de script pour que les cadres fonctionnent 
correctement. Vous allez apprendre a concevoir un ensemble de cadres 
attrayant, ergonomique et efficace. 

En raison des problemes de conception qui leur sont propres, les cadres 
sont une technique avancee de HTML et doivent etre traites comme tels. 

Elements etudies 

FRAMESET, cols, rows 

FRAME, name, sre, noresize, scrolling, frameborder, 

marginheight, marginwidth 

target 

BASE 

NOFRAMES 

I FRAME 
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7.1. Jeu d'encadrement : element 
FRAMESET 

Un fichier de definition de jeu d'encadrement possede une syntaxe 
analogue a celle d'un document HTML ordinaire, mais son code differe. 
Tout d'abord, avec HTML 4.01, ces documents utilisent un element 
DOCTYPE different en tete de page. lis sont en outre depourvus 
d'element BODY, remplace par un element FRAMESET. 

Nous allons immediatement mettre en jeu les cadres pour ameliorer 
notre site Web. Le meilleur moyen de commencer consiste a tracer sur 
une feuille de papier 1' aspect souhaite, en attribuant un nom a chaque 
cadre. Ici, comme le montre la figure suivante, notre ensemble de cadres 
ne contient que deux cadres. Le premier cadre, nomme nav (pour 
navigation), occupe la totalite de la largeur de l'ecran et ne possede 
qu'une hauteur de 50 pixels. Le second cadre, nomme princ (pour 
principal) occupe le reste de la fenetre. 



nav 



princ 



hsuleur 
50 fix 



Figure 7. 1 : Schema de /'ensemble de cadres de notre site 

Passons a la pratique. 

1 Ouvrez le Bloc-Notes. 

2 Saisissez l'element DOCTYPE caracteristique d'un ensemble de 
cadres : 

<! DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http : //www . w3 . org/TR/html4/f rameset . dtd"> 
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Poursuivez comme avec n'importe quel document HTML, en 
saisissant les elements HTML et HEAD. Comme a 1' habitude, 
n'oubliez pas de refermer immediatement ces elements : 

<HTML> 
<HEAD> 
</HEAD> 
<HTML> 

Vous allez maintenant saisir les differents elements a l'interieur de 
1' element HEAD : TITLE et divers elements MET A. 

<HEAD> 

<TITLE>"Mon site Web"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT=" text/html; 

charset=iso-8859-l"> 

<META name=" author" content=" votre nom"> 

<META name="version" content="2 .7 . 1"> 

</HEAD> 

Remarquez que ce contenu est identique a celui de 1' element 
HEAD de notre page d'accueil, a une exception pres : comme nous 
apportons une modification majeure au site, le numero de version 
devient 2.7.1. 

Contrairement a une page Web « normale », un fichier d' ensemble 
de cadres est depourvu d' element BODY, remplace par un element 
FRAMESET. Vous y saisissez la definition de votre ensemble de 
cadres : 

</HEAD> 

<FRAMESET rows="50, *"> 

<FRAME src="barrenav.html" name="nav"> 
<FRAME src="accueil .html" name ="princ"> 
</FRAMESET> 
</HTML> 

Nos deux cadres empiles se comportent comme des lignes et sont 
done definis dans l'ensemble de cadres comme tels (rows). Si 
nous avions choisi des cadres juxtaposes, done en colonnes, nous 
aurions employe cols. Remarquez la specification de la hauteur 
du premier cadre, 50 pixels. Le signe * employe pour le second 
signifie « occuper le reste de l'ecran ». Ces points seront etudies 
dans la suite de cette section. 

Tous les agents utilisateurs ne sont pas en mesure d'afficher les 
cadres. Une bonne precaution consiste a prevoir une alternative, a 
l'aide d'un element NOFRAMES. Si l'agent utilisateur ne peut 
afficher les cadres (ou est configure pour ne pas le faire), il 
restitue le contenu de 1' element NOFRAMES. 
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<FRAME src="accueil . html" name ="princ"> 
<NOFRAMES> 

<P>Ce document a recours fiagrave; un jeu d'encadrement 
qui contient : 
<UL> 

<LI><A href="barrenav.html">Une barre de 
navigation </A> 

<LI><A href="accueil .html">Une page 
d' accueil</A> 
</UL> 
</P> 
</NOFRAMES> 
</FRAMESET> 
</HTML> 

7 Enregistrez votre fichier sous le nom index.html. 



index.html ? 

fiEWtMUE , , , . , . , 

Vous pournez vous demander pourquoi ce fichier est enregistre sous 
ce nom. Lorsque qu'il recoit un URI depourvu de nom de fichier, tout 
agent utilisateur recherche par defaut un fichier nomme index.html. Cela 
evite d' avoir a memoriser le nom de la premiere page de votre site : seul 
l'URI vers son dossier est necessaire, soit done dans notre cas 
.../MonSite. 



L'element FRAMESET specifie la disposition de la fenetre principale de 
1' utilisateur selon des subdivisions rectangulaires : lignes et colonnes. 

Nous avons employe ici l'attribut rows. Celui-ci specifie la disposition 
des cadres horizontaux. Sa valeur est une liste de longueurs en pixels, en 
pourcentage ou relatives, separees par des virgules. La valeur par defaut 
est 100 %, e'est-a-dire une seule rangee. 

Prenons un exemple : 

<FRAMESET rows="20 , 25%, *"> 
. . .reste de la definition. . . 
</FRAMESET> 

Vous creez ici trois lignes. La premiere possede une hauteur fixe de 20 
pixels (pour recevoir par exemple des icones de navigation dont les 
dimensions sont connues). La seconde occupe 25 % de l'espace qui 
reste disponible et la troisieme le solde (soit 75 %). 

Nous aurions pu preferer une disposition en colonnes, a l'aide de 
l'attribut cols, qui specifie la disposition des cadres verticaux. Sa 
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valeur est une liste de longueurs en pixels, en pourcentage ou relatives, 
separees par des virgules. La valeur par defaut est 100 %, c'est-a-dire 
une seule colonne. 

II est possible de combiner des attributs rows et cols. Si l'attribut 
rows est absent, chaque colonne occupe la hauteur entiere de la page. Si 
l'attribut cols est absent, chaque rangee occupe la largeur entiere de la 
page. Si aucun de ces attributs n'est present, le cadre occupe la totalite 
de la page. 

Les cadres sont crees de gauche a droite pour les colonnes et de haut en 
bas pour les lignes. Quand les deux attributs sont specifies, les cadres 
sont crees ligne par ligne du haut vers le bas, les colonnes etant placees 
successivement de gauche a droite dans la rangee superieure, de gauche 
a droite dans la rangee suivante, etc. 

Voici un exemple de grille 2x3 : 

<FRAMESET rows="30% , 70%" cols="33%, 34%, 33%"> 

. . . reste de la definition. . . 

</FRAMESET> 

Les longueurs absolues dont le total n'est pas egal a 100 % de l'espace 
disponible reel devraient etre ajustees par 1' agent utilisateur. Quand ce 
total est inferieur a 100 %, l'espace restant devrait etre alloue 
proportionnellement a chaque vue. Quand il est superieur, chaque vue 
devrait etre reduite en fonction de la proportion de l'espace total qui lui 
est specifiee. 

Je pense que vous commencez a comprendre pourquoi il est fortement 
conseille de tracer sur papier l'aspect voulu d'un jeu d'encadrement 
avant de commencer a le programmer. . . 



7.2. Contenu d'un jeu d'encadrement : 
element FRAME 

Vous avez done cree un jeu d'encadrement fort simple. Celui-ci est 
toutefois pour le moment totalement depourvu de contenu. Vous devez 
avoir compris que cette page allait remplacer l'actuelle page d'accueil. 
Celle-ci est divisee en deux pages distinctes, affichees chacune dans un 
cadre propre : la partie navigation dans le cadre du haut, et le texte 
d'accueil dans le second cadre. Creez maintenant ces deux pages, a 
partir de l'ancienne page d'accueil. 
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1 Ouvrez dans le Bloc-Notes la derniere version de la page 
d'accueil, pageacc_6_1.html. 

2 Vous allez d'abord creer la barre de navigation. Modifiez tout 
d'abord le contenu des elements TITLE et META, comme suit : 

<HEAD> 

<TITLE>"Barre de navigation"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META name="author" content=" votre nom"> 
<META name="version" content="2 . 7 . 1"> 

</HEAD> 

3 Cette page doit etre une simple barre de navigation. Remplacez la 
totalite du contenu actuel de l'element BODY par ce qui suit (en 
faisant attention, vous pouvez vous eviter un peu de saisie...) : 

<BODY> 

<TABLE border="0" align="center"> 
<TR> 

<TD><A href ="accueil. html" target=princ> 

Accuei 1</A></ TD> 
<TD><A href="region.html" target=princ> 

Ma rSeacute;gion</A></TD> 
<TD><A href =" famille.html" target=princ> 

Ma famille</Ax/TD> 
<TD><A href="passions . html" target=princ> 

Mes passions</Ax/TD> 
<TD><A href="mailto:votre_nom@votre_FAI"> 

<IMG src="Images/Boi tes009.gif" height="50" 
alt="Ecrivez-moi ! " 
border= " " ></A></TD 
</TR> 
</TABLE> 
</BODY> 

Remarquez que nous avons elimine les couleurs attributes 
precedemment a la page, dans l'element BODY : vous savez 
desormais definir vos propres couleurs et arriere-plans. 

4 C'est tout pour la barre de navigation. Enregistrez le fichier sous 
le nom barrenav.html. 

5 Rechargez dans le Bloc-Notes la page pageacc_6_1 .html. 

6 Vous allez cette fois creer la page d'accueil. Modifiez le contenu 
des elements TITLE et META, comme suit : 

<HEAD> 

<TITLE>"Page d' accueil"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 
charset=iso-8 859-1 "> 
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<META name="author" content=" votre nom"> 
<META name="version" content="2 .7 . 1"> 
</HEAD> 

7 Modifiez comme suit le contenu de l'element BODY. Comme 
precedemment, vous devriez pouvoir vous eviter un peu de 
saisie... : 

<BODY> 

<H1 align="center">Ma page d' accueil</Hl> 

<HR> 

<H2 align="center">Bienvenue sur <EM>mon</EM> 

site.</H2> 
<DIV align="center"> 
<P>Vous trouverez sur ce site des 

<STRONG>informations</STRONG> :</P> 
<UL> 

<LI>sur ma rSeacute;gion</A> ;</LI> 
<LI>sur ma famille</A> ;</LI> 
<LI>sur mes passions</A>.</LI> 
</UL> 
<P> 

Naviguez dans le site Sagrave; l'aide de la barre de 
navigation proposée ci-dessus. 
</P> 
<HR> 

<ADDRESS> 

<A href=" . . /0Rignal/">01ivier Rignal</A> et 
<A href=" . . / JBogue/">Justin Bogue</A> sont les 
personnes Sagrave; contacter pour tout 
<A href="probleme">problème</A> 

rencontré sur le site. 
</ADDRESS> 
<!-- Des remarques lé gales ne seraient pas 

superflues --> 
</DIV> 
</BODY> 

Remarquez le recours a un element DIV pour obtenir le centrage 
du contenu de la page, apres les titres. 

8 Enregistrez le fichier sous le nom accueil .html. 
Voici les listings complets des trois fichiers crees a ce stade : 

Listing 7-1 : lndex.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HEAD> 
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<TITLE>"Mon site Web"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META name="author" content=" votre nom"> 
<META name="version" content="2 . 7 . 1"> 
</HEAD> 
<FRAMESET rows="50, *"> 

<FRAME src="barrenav. html" name="nav"> 
<FRAME src="accueil . html" name ="princ"> 
<NOFRAMES> 

<P>Ce document a recours Sagrave; un jeu 
d'encadrement qui contient : 
<UL> 

<LIXA href="barrenav.html">Une barre 

de navigation </A> 
<LIXA href="accueil . html">Une page 
d'accueil</A> 
</UL> 
</P> 
</NOFRAMES> 
</FRAMESET> 
</HTML> 

Listing 7-2 : barrenav.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 
<HEAD> 

<TITLE>"Barre de navigation"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META name="author" content=" votre nom"> 
<META name="version" content="2 . 7 . 1"> 
</HEAD> 
<B0DY> 

<TABLE border="0" align="center"> 
<TR align="center"> 

<TD><A href ="accueil . html" target=princ> 

Accueil</A></TD> 
<TDXA href="region . html" target=princ> 

Ma région</A></TD> 
<TDXA href="famille .html" target=princ> 

Ma famille</A></TD> 
<TDXA href ="passions . html" target=princ> 

Mes passions</A></TD> 
<TDXA href="mailto: votre_nom@votre_FAI"> 
<IMG src="Images/Boites009 . gif " 
height="50" alt="Ecrivez-moi !" 
border="0"x/Ax/TD 
</TR> 
</TABLE> 



LE GUIDE COMPLET 251 



Chapitre 7 



Jeux d'encadrement 



</BODY> 
</HTML> 

Listing 7-3 : accueil.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose . dtd"> 
<HTML> 
<HEAD> 

<TITLE>"Page d' accueil"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META name="author" content="votre nom"> 
<META name="version" content="2 . 7 . 1"> 
</HEAD> 
<BODY> 

<H1 align="center">Ma page d' accueil</Hl> 

<HR> 

<H2 align=" center ">Bienvenue sur <EM>mon</EM> 

site.</H2> 
<DIV align="center" 
<P>Vous trouverez sur ce site des 

<STRONG>informations</STRONG> :</P> 
<UL> 

<LI>sur ma région</A> ;</LI> 
<LI>sur ma famille</A> ;</LI> 
<LI>sur mes passions</A>. </LI> 
</UL> 
<P> 
Naviguez dans le site Sagrave; l'aide de la barre 
de navigation proposé e ci-dessus. 
</P> 
<HR> 
<ADDRESS> 

<A href=" . . /0Rignal/">01ivier Rignal</A> et 
<A href=" . . / JBogue/">Justin Bogue</A> sont 
les personnes Sagrave; contacter pour tout 
<A href="probleme">problème</A> rencontré 
sur le site. 
</ADDRESS> 
<!-- Des remarques lé gales ne seraient pas 

superflues --> 
</DIV> 
</B0DY> 
</HTML> 



Vous pouvez maintenant examiner votre travail dans votre navigateur. 
Ne testez pas encore les liens de la barre de navigation. 



252 LE GUIDE COMPLET 



Contenu d'un jeu d'encadrement : element FRAME 



^ " ' § ' _. ' © | U file:J/JG:JHTMLJMon5te/index. 



"3 © OK [H~ 



■■■■■. 



Ma page d'accueil 
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Figure 7.2 ; Aspect du nouveau jeu d'encadrement 

Quelques problemes se posent dans la barre de navigation. Tout d'abord, 
en ayant elimine les couleurs, l'icone retenue pour envoyer un courriel 
ressort de facon un peu desagreable. Vous pourriez definir votre propre 
charte graphique (et vous le ferez probablement), et savez ou chercher 
une icone plus adaptee, grace au Chapitre 6. 

Plus genant, bien que nous ayons pris la precaution d'eliminer les 
bordures du tableau et d'ajuster la hauteur de l'icone, celle-ci n'apparait 
pas totalement. Une barre de defilement est done proposee sur la droite 
de l'ecran. En outre, la barre separant les deux cadres n'est pas du 
meilleur gout. Remarquez d'ailleurs qu'il est possible de la cliquer- 
deposer pour modifier la taille du cadre de la barre de navigation, ce qui 
n'est pas ce que nous souhaitons. II est possible de remedier a ces 
differents points. 

1 Ouvrez a nouveau le fichier index.html. 

2 Modifiez comme suit 1' element FRAME de la barre de navigation : 

<FRAME src="barrenav. html" name="nav" noresize 
scrolling="no" frameborder="0" marginheight="0"> 

<FRAME src="accueil . html" name ="princ" f rameborder="0"> 

Nous reviendrons sous peu plus en detail sur les attributs 
employes. 

3 Enregistrez le fichier sans modifier son nom. Examinez-le a 
nouveau dans votre navigateur. 
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Figure 7.3 : 

Aspect du jeu 

d'encadrement 

modifie 



L' aspect est desormais beaucoup plus sympathique. Avant de proceder a 
un test plus approfondi, il est necessaire de veiller a ce que les cibles des 
liens de la barre de navigation soient valides. Si les fichiers famille.html 
et passions.html existent bien, ce n'est pas le cas du fichier region.html. 
Reglez ce probleme maintenant. 

4 Ouvrez le fichier region1_6_3.html, puis, sans le modifier, 
enregistrez-le sous le nom region.html, sans fermer le Bloc-Notes 
ni le fichier. 

5 Testez maintenant les differents liens de la barre de navigation. 
Vous vous deplacez aisement d'une page a l'autre, sans avoir a 
revenir a la page d'accueil. Comme toutefois les liens sont 
dorenavant toujours presents a l'ecran, ceux situes sur les pages 
secondaires deviennent superflus. Les eliminer ameliorera 1' aspect 
de ces pages, tout en facilitant leur maintenance ulterieure. 
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6 Revenez au fichier region.html, toujours ouvert. Modifiez son 
numero de version comme suit : 

<META name ="version" content="2 . 7 . 1"> 

7 Pour bien faire, supprimez les deux premiers elements OBJECT 
(1' applet Python et 1' animation MNG), puis supprimez les liens 
situes en bas de la page. Les lignes a supprimer sont les 
suivantes : 

<!-- Essayer d'abord un applet en Python --> 
<OBJECT title="Coucher de soleil sur le lac de 
Linciel" classid="Linciel.py"> 
<!-- Sinon, essayer 1' animation MNG --> 
<OBJECT data="Linciel .mng" type="application/mng"> 

<P align="center"> 

<A href="pageaccl_6_l ,html">Retour vers la page 
d'accueil</A> 

</P> 

8 Vous pouvez modifier le commentaire avec l'element OBJECT jpg. 
Enregistrez ensuite le fichier sous le meme nom. 

9 Ouvrez successivement les fichiers famille.html et passions.html. 
Modifiez les numeros de version en 2 . 7 . 1 et supprimez les liens, 
puis enregistrez-les sans modifier leur nom. 

Desormais, vous passez d'une page a 1' autre aisement, d'un 
simple clic. 

II est bien sur possible a ce stade d'encore ameliorer le site. A l'aide des 
informations obtenues lors de la lecture des chapitres precedents 
(essentiellement le Chapitre 6), vous pourriez notamment : 

Ajouter un arriere-plan aux deux cadres. En toute logique, un 
bandeau serait parfait pour la barre de navigation (puisque la taille 
est fixe), tandis qu'une mosai'que, eventuellement de type 
filigrane, serait parfaite pour le cadre principal. 

Ajouter un arriere-plan aux cellules du tableau de la barre de 
navigation, ou remplacer les liens texte par des dessins ou icones 
employant des polices plus sophistiquees. Vous verrez dans le 
Chapitre 9, traitant des scripts, comment rendre cette barre encore 
plus attractive. 
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Vous pourriez egalement creer d'autres barres de navigation, adaptees a 
l'affichage de pages de niveau inferieur des pages deja creees (par 
exemple, un detail des passions), voire modifier totalement le jeu 
d'encadrement en le remplacant par un autre, comme vous allez le 
decouvrir dans la suite de ce chapitre. Les possibilites ne dependent que 
de votre imagination ! 

Voici le nouvel etat du listing du fichier index.html. 
Listing 7-4 : index.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HEAD> 

<TITLE>"Mon site Web"</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT=" text /html; 

charset=iso-8 859-1 "> 
<META name="author" content="votre nom"> 
<META name="version" content="2 . 7 . 2"> 
</HEAD> 
<FRAMESET> 

<FRAME src="barrenav. html" name="nav" noresize 
scrolling="no" 

f rameborder="0" marginheight="0"> 
<FRAME src="accueil . html" name ="princ" 

f rameborder="0"> 
<NOFRAMES> 

<P>Ce document a recours Sagrave; un jeu 
d'encadrement qui contient : 
<UL> 

<LIXA href="barrenav. html"> 

Une barre de navigation </A> 
<LIXA href="accueil .html"> 
Une page d' accueil</A> 
</UL> 
</P> 
</NOFRAMES> 
</FRAMESET> 
</HTML> 



II est toutefois temps de comprendre comment s'effectue toute cette 
magie, en examinant les differents constituants de 1' element FRAMESET. 
Commencons par les attributs de 1' element FRAME. 
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Attributs essentiels de l'element FRAME : 
name et src 

L'element FRAME definit le contenu et l'apparence d'un unique cadre. 

L'attribut name assigne un nom au cadre courant. Ce nom est employe 
comme cible des liens : le cadre dans lequel ouvrir un document. Bien 
que facultatif en theorie, cet attribut est en pratique presque toujours 
necessaire. 

<FRAME src="barrenav. html" name="nav" noresize 

scrolling="no" 

frameborder="0" marginheight="0"> 
<FRAME src="accueil . html" name ="princ" 

frameborder="0"> 

Un nom de cadre doit repondre a certains imperatifs. II doit commencer 
avec un caractere alphanumerique, pas par un symbole. II existe 
toutefois un certain nombre de « noms reserves » qui possedent des 
proprietes speciales. Ces noms commencent par un trait de 
soulignement. II s'agit de blank, self, parent, et top. Chacun 
possede un but special dans les cadres, et accomplit quelque chose 
d'unique. Ces noms reserves et leur emploi seront examines un peu plus 
loin dans ce chapitre. 

L'attribut src specifie la localisation du contenu initial a placer dans le 
cadre defini par l'element FRAME : 

<FRAME src=" bar renav.html" name="nav" noresize 

scrolling="no" 

frameborder="0" marginheight="0"> 
<FRAME src="accueil .html" name ="princ" 

f rameborder=" "> 



Contenu et definition des cadres 

™" E La definition d'un jeu d'encadrement, telle que specifiee par les 
valeurs des attributs src des elements FRAME, ne change jamais. En 
revanche, le contenu de l'un ou de plusieurs de ses cadres peut changer. 
Apres une telle modification, la definition du jeu d'encadrement ne 
reflete plus la situation courante de ses cadres. 
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Attributs de mise en forme de I'element FRAME 

Ces attributs conditionnent la facon dont les agents utilisateurs restituent 
le cadre et influent sur son comportement. 

L'attribut booleen noresize indique a l'agent utilisateur que le cadre 
ne doit pas etre redimensionnable : s'il est present, il est impossible 
d'effectuer un glisser-deposer pour modifier la taille du cadre. 

<FRAME src="barrenav. html" name="nav" noresize 
scrolling="no" 
f rameborder=" " marginheight=" "> 

L'attribut scrolling autorise ou interdit la presence de barres de 
defilement pour la fenetre du cadre. Les valeurs possibles sont auto 
(une barre de defilement est presente si necessaire. C'est la valeur par 
defaut), yes (mecanisme de defilement toujours present) et no 
(mecanisme de defilement toujours absent). 

<FRAME src="barrenav. html" name="nav" noresize 
scrolling="no" 

f rameborder="0" marginheight="0"> 

L'attribut f rameborder procure a l'agent utilisateur une indication sur 
la bordure du cadre. Les valeurs possibles sont 1 (presence d'une 
separation entre ce cadre et chacun des cadres adjacents. C'est la valeur 
par defaut) et (pas de separation entre ce cadre et chacun des cadres 
adjacents). 

Remarquez que des separateurs peuvent neanmoins etre dessines a cote 
de ce cadre, s'ils sont specifies par les cadres adjacents. Si vous ne 
voulez pas de separation entre plusieurs cadres, specinez 
frameborder="0" pour tous les cadres concernes, comme nous 
l'avons fait sur notre site : 

<FRAME src="barrenav. html" name="nav" noresize 

scrolling="no" 

frameborder="0" marginheight=" 0"> 
<FRAME src="accueil . html" name ="princ" 

frameborder="0"> 

Les attributs marginwidth et marginheight specifient 
respectivement la quantite d'espace a laisser entre le contenu du cadre et 
ses marges laterales (gauche et droite) et haute et basse. La valeur, 
exprimee en pixels, doit etre superieure a zero. Les valeurs par defaut 
dependent de l'agent utilisateur. Comme les principaux navigateurs 
presentent sur ce point des differences sensibles, mieux vaut specifier 
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explicitement des valeurs, surtout pour les barres de navigation et les 
cadres a dimensions fixes. 

<FRAME src="barrenav. html" name="nav" noresize 
scrolling="no" 
frameborder="0" marginheight="0"> 



Autres attributs de I'element FRAME 

Comme pour la plupart des autres elements, un element FRAME peut 
posseder des attributs id, class (identifiants internes au document), 
title (titre de I'element) et style (informations de style en ligne), 
ainsi qu'un attribut longdesc qui specifie un lien vers une description 
longue du cadre. Cette description devrait suppleer a la breve 
description fournie a l'aide de 1' attribut title. Elle peut etre 
particulierement utile aux agents utilisateurs non visuels. 

L'attribut longdesc permet de rendre les documents avec des cadres 
plus accessibles aux personnes utilisant des agents utilisateurs non 
visuels. Remarquez toutefois que les descriptions longues associees aux 
cadres sont attachees a ceux-ci et non a leur contenu. Ce dernier pouvant 
varier au fil du temps, la description longue initiale peut devenir 
inadequate pour les contenus ulterieurs du cadre. Mieux vaut notamment 
ne pas inclure une image comme seul contenu d'un cadre. 

Le document avec jeu d'encadrement suivant decrit deux cadres. Le 
cadre de gauche contient une table des matieres et celui de droite 
contient initialement 1' image d'une autruche : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 

"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>Un document avec jeu d'encadrement mal fait</TITLE> 
</HEAD> 
<FRAMESET cols="20%, 80%"> 

<FRAME src="table_des_matieres .html"> 

<FRAME src="autruche . gif " longdesc="autruche-desc.html"> 
</FRAMESET> 
</HTML> 

Remarquez que l'image est incluse dans le cadre independamment de 
tout element HTML : l'attribut longdesc constitue le seul moyen de 
specifier un texte de remplacement. Si le contenu du cadre de droite 
change (par exemple, l'utilisateur choisit dans la table des matieres un 
serpent a sonnette), les utilisateurs n'auront aucun acces textuel au 
nouveau contenu du cadre. 
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II ne faut done pas placer directement une image dans un cadre comme 
valeur de l'attribut src. L'image doit plutot etre specifiee dans un 
document HTML separe, dans lequel elle est annotee a l'aide du texte de 
remplacement adequat : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 

"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>Un document avec jeu d'encadrement bien fait</TITLE> 
</HEAD> 
<FRAMESET cols="20%, 80%"> 

<FRAME src="table_des_matieres . html"> 

<FRAME src="autruche-conteneur . html"> 
</FRAMESET> 
</HTML> 

<!-- Dans le document autruche-conteneur.html: --> 

<HTML> 

<HEAD> 

<TITLE>L'autruche rapide et puissante</TITLE> 

</HEAD> 

<P> 

<0BJECT data="autruche . gif " type="image/gif "> 

Ces autruches ont vraiment bon goût ! 

</0BJECT> 

</HTML> 

Enfin, un attribut target peut etre place dans un element FRAME, 
defmissant ainsi une cible par defaut pour tous les liens de ce cadre. 
L'attribut target est etudie plus en detail dans la section suivante. 



A 



Definition et contenu 

Un document qui contient une definition de cadre ne doit pas 
comporter le contenu de ce cadre. L'exemple suivant est illegal, puisque 
le contenu du deuxieme cadre se trouve dans le meme document que le 
jeu d'encadrement. 



<FRAMESET cols="50% , 50%"> 

<FRAME src="contenu_cadrel . html"> 

<FRAME src="#ancre_du_meme_document"> 

<N0FRAMES> 

. . .un texte . . . 

<H2><A name="ancre_du_meme_document">Passage important</A> 

</H2> 

. . . un texte . . . 

</N0FRAMES> 
</FRAMESET> 
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7.3. Determination du cadre cible : 
attribut target 

Une fois le jeu d'encadrement cree, vous devez disposer d'un moyen de 
naviguer entre les cadres. La plupart des jeux d'encadrement consistent 
en un cadre principal entoure d'autres cadres, comme des bannieres, des 
menus de navigation ou d'autres elements. 

Que se passe-t-il toutefois lorsque vous cliquez sur un lien situe a 
l'interieur d'un cadre ? D'habitude, cela ouvre une nouvelle page a 
l'interieur de la fenetre active, done du meme cadre. Ceci peut rendre les 
choses difficiles a lire lors de l'utilisation d'un menu de navigation 
etroit ! Heureusement, lorsque vous cliquez sur un lien dans un 
ensemble de cadres, vous pouvez specifier que la nouvelle page doit 
s'ouvrir : 

Dans le meme cadre. 

Dans un autre cadre du jeu d'encadrement. 

Dans un autre cadre a l'interieur d'un cadre enfant ou parent 
(dans le cas de cadres imbriques, abordes plus loin). 

Dans un nouveau jeu d'encadrement qui remplace le jeu existant 
et toutes les fenetres qui pouvaient s'y trouver. 

Dans un autre cadre, forcant un autre cadre a se relancer ou a 
ouvrir une nouvelle page. 

Dans une nouvelle fenetre du navigateur. 

Dans la fenetre actuelle en remplacant l'actuel jeu d'encadrement. 

Comme vous pouvez le voir, il existe de nombreuses facons de 
manipuler le contenu des cadres a l'aide de liens. Par defaut, les liens 
s'ouvrent dans le meme cadre. 

Pour ouvrir un lien dans un autre cadre, vous employez 1' attribut 

target : 

<A href ="exemple . html" target=" cible"> 

Si toutefois vous souhaitez ouvrir un cadre a l'interieur d'un autre cadre 
du jeu d'encadrement, vous devez d'abord preciser le nom de chaque 
cadre, et cibler ce cadre. Par exemple : 

<FRAME name="contenu"> 

nomme un cadre precis nomme contenu. Un clic sur le lien 
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<A href ="inf o . html" target="contenu"> 

ouvrira le document Web nomme info.html a l'interieur du cadre nomme 

contenu. 

L'attribut target peut se placer sur les elements qui creent des liens (A, 
link), des images cliquables (area) et des formulaires (FORM). 

Vous pouvez aussi cibler tous les cadres d'un ensemble, et tous les liens 
d'un cadre, en placant l'attribut target dans l'element FRAME. 

<FRAME name="barrenav" target="contenu"> 

ouvre un cadre nomme barrenav, qui ouvrira par defaut tous ses liens 
dans le cadre nomme contenu. Comme vous pouvez le voir, les 
possibilites sont immenses. 



Noms reserves 

Nous avons precedemment evoque l'existence de noms reserves, qui 
debutent par un trait de soulignement : blank, self, parent et 

_top. 

Ces noms reserves devraient imposer a 1' agent utilisateur de fonctionner 
comme suit : 

Un lien qui cible blank ouvre une page dans une nouvelle 
fenetre depourvue de nom. 

Utilisez target=_blank lorsque votre lien renvoie en dehors de 
votre site. Par exemple, si vous proposez une liste de liens, ceux 
qui appartiennent a d'autres personnes doivent s'ouvrir dans de 
nouvelles fenetres. En effet, votre site n'est probablement pas le 
seul a utiliser les cadres : rien n'est plus enervant qu'un site en 
cadres a l'interieur du petit cadre de contenu d'un autre site en 
cadres. En outre, vous ne voudriez peut-etre pas etre associe au 
proprietaire du contenu de ce site : si le lien s' ouvre dans votre 
ensemble, il apparaitra comme faisant partie de votre site, ce qui 
peut etre tres desagreable. 



A 



Anciennes versions 

Avec les anciennes versions de Netscape Navigator, new possede un 
effet analogue a blank, mais ne fait pas partie du standard HTML. 
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La cible self ouvre une page a l'interieur du cadre actif. C'est 
le comportement par defaut de beaucoup d' agents utilisateurs : en 
1' absence de cible specinee, le document nomme par le lien 
s' ouvre dans le cadre actif. Ceci est utile pour les liens situes a 
l'interieur du cadre principal, generalement censes ouvrir des 
contenus differents dans ce cadre. 

Le nom reserve parent s'applique aux cadres imbriques. 
Lorsque vous ciblez le cadre parent, vous ciblez reellement le 
cadre dans lequel reside votre cadre actuel. 

Enfin, top ouvre le lien dans la fenetre en cours, remplacant la 
totalite du jeu d'encadrement actif. Une fenetre de navigation peut 
etre consideree comme un conteneur. Celui-ci peut renfermer un 
jeu d'encadrement, a l'interieur duquel peut se trouver un autre 
jeu d'encadrement. Lorsque vous lancez un lien dans un autre 
cadre, le contenu est melange dans le conteneur. En l'ouvrant en 
revanche dans top, le contenu du conteneur est remplace en 
totalite par la ou les pages auxquelles mene ce lien. Vous 
emploierez par exemple top pour ouvrir un nouveau fichier de 
definition de jeu d'encadrement, different du jeu actif. 

Remarquez bienl'emploi de « devraient » . . . En pratique, quelques 
precautions complementaires sont necessaries lors de l'emploi de jeux 
d'encadrement imbriques, comme vous le verrez plus loin. Les agents 
utilisateurs, dont les principaux navigateurs, peuvent interpreter 
differemment selon les situations ces noms reserves, notamment 
_parent. 



A 



Conflits de noms de cadres 

A un moment donne, il peut arriver que deux cadres possedent le 
meme nom. C'est souvent le resultat d'une ouverture d'un ensemble de 
cadres dans un ensemble existant. HTML 4.01 dispose de regies 
speciales pour la gestion de ce genre de conflits. Le navigateur recherche 
d'abord le cadre nomme dans l'ensemble le plus profond. Si aucun cadre 
de ce nom n'existe, il cherche dans le cadre parent, puis dans l'ensemble 
parent, et ainsi de suite. S'il ne parvient toutefois pas a identifier de 
cadre portant ce nom, il ouvre un nouveau cadre et lui attribue ce nom. 
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Etablissement de la cible par defaut 
des liens 

Quand, dans une meme document, plusieurs liens designent la meme 
cible, il est possible de specifier la cible une seule fois et de se passer de 
l'attribut target de chaque element. Pour ce faire, definissez dans le 
document l'attribut target sur un element BASE. 

Par exemple, pour specifier que tous les liens situes dans le document 
passions.html doivent ouvrir un nouveau fichier dans le cadre nomme 
af f ichage, vous definissez comme suit un element BASE : 

<META name="version" content="2 . 7 . 1"> 
<BASE href="MonSite" target="affichage"> 

</HEAD> 



Semantique de cible 

La determination par 1' agent utilisateur du cadre cible n'est pas toujours 
evidente. HTML 4.01 recommande que les agents utilisateurs 
determinent le cadre cible dans lequel charger une ressource reliee selon 
la preseance suivante (de la priorite la plus elevee a la plus basse) : 

Si l'attribut target d'un element vise un cadre connu, quand 
l'element est active (un clic sur un lien ou la soumission d'un 
formulaire), la ressource designee par l'element devrait se charger 
dans le cadre cible. 

Si cet element est depourvu d'attribut target et qu'en revanche 
l'element BASE en possede un, c'est l'attribut target de 
l'element BASE qui determine le cadre. 

Si ni cet element ni l'element BASE ne se referent a une cible, la 
ressource designee par l'element devrait se charger dans le cadre 
qui contient l'element (comportement par defaut identique a une 
cible self). 

Si un attribut target se refere a un cadre C inconnu, l'agent 
utilisateur devrait creer une nouvelle fenetre et un nouveau cadre, 
puis assigner le nom c au cadre et, enfin, charger la ressource 
designee par l'element dans le nouveau cadre. 
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Les agents utilisateurs devraient fournir aux utilisateurs un mecanisme 
permettant de surclasser l'attribut target. 

Remarquez qu'une fois de plus les comportements par defaut preconises 
par HTML pour les agents utilisateurs sont d'une efficacite certaine : 
vous pouvez tres souvent vous abstenir de specifier differents attributs 
en vous reposant sur le comportement par defaut. C'est toutefois une 
attitude un peu risquee, car un agent utilisateur au comportement 
inhabituel peut amener des resultats catastrophiques : par securite, 
mieux vaut specifier tout ce qui peut l'etre. Cela est particulierement 
valable pour 1'attribut target. 



7.4. Ensembles de cadres imbriques 

Les jeux d'encadrement peuvent s'imbriquer a n'importe quel niveau. 

Dans l'exemple suivant, l'element FRAMESET externe divise l'espace 
disponible en trois colonnes presque egales. L'element FRAMESET 
interne partage alors la deuxieme colonne en deux rangees de hauteur 
inegale. 

<FRAMESET cols="33%, 33%, 34%"> 

<FRAME name="cadrel" src="cadrel . html"> 
<FRAMESET rows="40%, 60%"> 

<FRAME name="cadre211" src="cadre211 . html"> 
<FRAME name="cadre212" src="cadre212 . html"> 
</FRAMESET> 

<FRAME name="cadre3" src="cadre3 . html"> 
</FRAMESET> 



Le schema de 1' aspect de ce jeu d'encadrement est presente dans la 
figure suivante. 





Premier 
cadre 


Deuxieme 
cadre, 
ligne 1 


Troisieme 
cadre 

1 


Deuxieme 
cadre, 
ligne 2 



Figure 7.5 : 

Jeux d'encadrement imbriques 
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Lorsque des jeux d'encadrement sont imbriques, certains cadres sont les 
« parents » des autres. Cela est sans importance la plupart du temps, 
mais devient capital lorsque vous devez gerer les scripts et que vous 
utilisez les noms reserves, avec comme cible parent. 

Revenez a l'exemple presente ci-dessus. Ce jeu cree un ensemble de 
quatre cadres. Le jeu principal est divise en trois colonnes, la colonne 
centrale etant divisee en deux lignes. Considerez le lien suivant : 

<A href ="test_parent . html" target="_parent">Lien</A> 

Nous avons place ce lien dans les flchiers nommes cadre1.html et 
cadre2H.html. Le flchier cadre2l2.html contient en revanche le lien : 

<A href ="test_parent . html" target="_self ">Lien</A> 

Enfin, le flchier cadre3.html contient le lien : 

<A href ="test_parent . html" target="_top">Lien</A> 

En ouvrant le flchier cadresimbriques.html dans votre navigateur, vous 
voyez ce qui est presente dans la figure suivante. 
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Figure 7.6 : Jeux d'encadrement imbriques 

Un clic sur le lien du cadre nomme cadre 1 ouvre le flchier 
test_parent.html dans la totalite de la page. 
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Figure 7. 7 : 

Le jparent de cadre 1 est la 
totalite de la fenetre 
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Un clic sur le lien du cadre de la seconde ligne de la seconde colonne 
ouvre le fichier test_parent.html dans ce cadre. 



EEESE33S1HS5 



Fichier Edition Affkhacs Alter .-■ ffei q ue- page 5 Qutils 



* • - m o © r 



f lie i/rji-j : yHTnL,'MoriS!i;e,'caciresimbr iques : html 



^3 © ok [nr 



' Demarrage Dernieres nouvEilles ... Credit Agricole : Ba.. . ■' ■ magic thegaihering... 



To:.;!: Men oBav- Logout 



U "Cadres imbriques et cadre _parent" $fe Les t p^ I TML de base 



Cadre 1 



Cadre 2 ligne 1 



^J 



Cadre 3 



Resultat du test de_parent 



Figure 7.8 : Le _self de cadre2 est bien lui-meme 

Enfin, un clic sur le lien du cadre 3 ouvre aussi le fichier dans la totalite 
de la page : pour cadrel et cadre2, top et parent possedent la 
meme signification. Jusque-la, tout va bien. 

En revanche, un clic sur le lien du cadre de la premiere ligne de la 
seconde colonne devrait ouvrir le fichier test_parent.html dans la totalite 
de cette colonne, remplacant ce deuxieme jeu d'encadrement. 
Malheureusement, tel n'est pas le cas, et le fichier s'ouvre comme si 
top avait ete employe, ou comme si vous aviez clique sur le lien de 
cadrel : e'est-a-dire sur un lien situe dans un cadre qui n'appartient pas 
lui-meme a un jeu d'encadrement secondaire. Le resultat est identique a 
ce qui est presente dans la figure de la page 276. 

Que se passe-t-il ? II semble en pratique que les agents utilisateurs 
considerent souvent que des jeux d'encadrement imbriques definis dans 
un unique fichier ne constituent qu'un unique jeu d'encadrement. Pour 
remedier a ce defaut, nous avons modifie comme suit le fichier de 
specification du jeu d'encadrement principal, enregistre sous le nom 
cadresimbriques2.html : 

<FRAMESET cols="33%, 33%, 34%"> 

<FRAME name="cadrel" src="cadrel . html"> 

<FRAME name="cadre2" src="cadre2 . html"> 

<FRAME name="cadre3" src="cadre3 . html"> 
</FRAMESET> 
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Vous specifiez done ici un jeu d'encadrement unique. Remarquez 
1' apparition du fichier cadre2.html. Celui-ci est une nouvelle 
specification de jeu d'encadrement : 

<FRAMESET rows="40%, 60%"> 

<FRAME name="cadre211" src="cadre211 . html"> 

<FRAME name="cadre212" src="cadre212 . html"> 
</FRAMESET> 



Nous possedons deja les autres fichiers. A l'examen du fichier 
cadresimbriques2.html dans un navigateur, aucune difference avec 
l'aspect precedent n'apparait, si ce n'est le titre et l'URL de la page. 
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Figure 7.9 : 

Jeux d'encadrement 
imbriques 



Comme precedemment, un clic sur le lien du cadre nomme cadre 1 
ouvre le fichier test_parent.html dans la totalite de la page. Un clic sur le 
lien du cadre de la seconde ligne de la seconde colonne ouvre le fichier 
test_parent.html dans ce cadre. Enfin, un clic sur le lien du cadre 3 ouvre 
aussi le fichier dans la totalite de la page. Aucune difference. 

Cette fois cependant, un clic sur le lien du cadre de la premiere ligne de 
la seconde colonne ouvre bien le fichier test_parent.html dans la totalite 
de cette colonne, remplacant ce deuxieme jeu d'encadrement. 
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Figure 7.10 : 

Le _parent de 
cadre2H est cette 
fois cadre2 
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Lors de la realisation de cadres imbriques, mieux vaut done separer les 
specifications des jeux concernes pour eviter tout probleme de 
comportement du nom reserve parent, ou vous en tenir a des cadres 
nommes explicitement designes. 



7.5. Partage de donnees entre cadres 

II est possible de partager des donnees entre plusieurs cadres en incluant 
celles-ci au moyen de l'element OBJECT. L'element OBJECT doit etre 
place dans l'element HEAD du document de definition du jeu 
d'encadrement et nomme a l'aide d'un attribut id. Tout document qui 
est le contenu d'un cadre dans le jeu d'encadrement peut alors se referer 
a cet identifiant. 

L'exemple suivant illustre la maniere dont un script pourrait appeler un 
element OBJECT defini pour le jeu d'encadrement entier (nous 
etudierons plus en detail les scripts dans le Chapitre 10). 

Fichier de definition du jeu d'encadrement : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 

"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>Voici un jeu d'encadrement avec un OBJECT dans HEAD 
</TITLE> 

<! — Cet OBJECT n'est pas restitu&eacute ! — > 
<0BJECT id="mon_objet" data="data .bar"x/OBJECT> 
</HEAD> 
<FRAMESET> 

<FRAME src="martine . html" name="martine"> 
</FRAMESET> 
</HTML> 

Listing 7-5 : Fichier martine.html 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 
<HEAD> 

<TITLE>La page de Martine</TITLE> 
</HEAD> 
<B0DY> 
. . . le début du document... 

<P> 

<SCRIPT type="text/javascript"> 

parent .mon_objet . proprié té 

</SCRIPT> 
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. . . le reste du document. . . 
</BODY> 
</HTML> 

D'autres cadres du jeu d'encadrement pourraient egalement faire 
reference a l'element OBJECT. 



7.6. Contenu de remplacement : 
element NOFRAMES 

Tous les agents utilisateurs ne sont pas en mesure de reconnaitre les 
cadres. En outre, certains peuvent etre configures pour ne pas les 
afficher. II est done important de fournir un contenu de remplacement, ce 
qui est obtenu a l'aide de 1'element NOFRAMES. 

L'element NOFRAMES specifie le contenu qui ne devrait etre affiche que 
par les agents utilisateurs qui ne reconnaissent pas les cadres ou sont 
configures pour ne pas les afficher. Les agents utilisateurs qui 
reconnaissent les cadres ne doivent afficher le contenu d'une declaration 
NOFRAMES que s'ils sont configures pour ne pas afficher les cadres. 
Ceux qui ne reconnaissent pas les cadres doivent afficher dans tous les 
cas le contenu de l'element NOFRAMES. 

L'element NOFRAMES fait partie a la fois des DTD transitoires et des 
jeux d'encadrement. Dans un document qui fait appel au DTD de jeu 
d'encadrement, l'element NOFRAMES est place a la fin de la section 
FRAMESET du document. 

C'est ce que nous avons fait dans notre fichier de definition de jeu 
d'encadrement index.html : 

<FRAMESET rows="50, *"> 

<FRAME src="barrenav. html" name="nav" noresize 

crolling="no" f rameborder="0" marginheight="0"> 
<FRAME src="accueil . html" name ="princ" f rameborder="0"> 
<NOFRAMES> 

<P>Ce document a recours Sagrave; un jeu d'encadrement 
qui contient : 
<UL> 

<LI><A href ="barrenav. html ">Une barre de 

navigation </A> 
<LI><A href="accueil .html">Une page 
d' accueil</A> 
</UL> 
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</p> 

</NOFRAMES> 

</FRAMESET> 



L'element NOFRAMES peut etre employe dans un document qui constitue 
la source d'un cadre et qui utilise le DTD transitoire. Cela permet aux 
auteurs d'expliquer l'objet du document, au cas ou celui-ci serait vu 
independamment du jeu d'encadrement ou encore avec un agent 
utilisateur ne reconnaissant pas les cadres. 



7.7. Cadres en ligne : element IFRAME 

Depuis sa version 3.0, Internet Explorer permettait de dennir des cadres 
en ligne, qui « flottaient » dans la page. Ce dispositif a ete repris dans 
HTML 4.01. 

L'element IFRAME permet d'inserer un cadre dans un bloc de texte. 
L'insertion d'un cadre en ligne dans un passage textuel revient un peu a 
y inserer un objet via l'element OBJECT : ces elements permettent tous 
deux l'insertion d'un document HTML au sein d'un autre, ils peuvent 
tous deux etre alignes sur le texte environnant, etc. 

Cet element possede les memes attributs que l'element FRAME, a 
l'exception de l'attribut noresize superflu puisqu'un cadre en ligne ne 
peut jamais etre redimensionne. 

Les informations qui doivent etre inserees en ligne sont designees par 
l'attribut src. En revanche, comme avec l'element OBJECT, le contenu 
de l'element I FRAME ne doit etre affiche que par les agents utilisateurs 
qui ne reconnaissent pas les cadres ou qui sont configures pour ne pas 
les afficher. 

Voici un exemple de mise en ceuvre d'un cadre flottant. 
Listing 7-6 : cadreflottant.html 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 

"http: //www.w3 . org/TR/html4/ frameset .dtd"> 
<HTML> 
<HEAD> 

<TITLE>Exemple de cadre flottant </TITLE> 
</HEAD> 
<B0DY> 

<P>Ceci est un exemple de cadre flottant 
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<IFRAME src="cadref lottant2 . html" 
width="400" height="500" 
scrolling="auto" f rameborder="l"> 
[Votre agent utilisateur ne reconnait pas les cadres ou 
n'est pas conf iguré pour les afficher pour 1' instant. 
Cependant, vous pouvez visiter le 

<A href="cadref lottant2 ,html">document concerne . </A>] 
</IFRAME> 
placé Sagrave; 1' inté rieur d'un texte . 
</P> 
</BODY> 
</HTML> 



Listing 7-7 : cadreflottant2.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 

<HTML> 

<HEAD> 

<TITLE>Cadre f lottant</TITLE> 

</HEAD> 

<BODY> 

<Hl>Quelques informations importantes</Hl> 

<P>Les informations contenues dans ce document sont 
af fichées dans un cadre flottant si 1' agent 
utilisateur reconnaî t les cadres ou peuvent être 
af fiché es dans une page propre si tel n'est pas le cas . 
</P> 

</B0DY> 
</HTML> 

Pour les agents utilisateurs qui reconnaissent les cadres, l'exemple suivant 
placera un cadre en ligne, entoure par une bordure, au milieu du texte. 
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Figure 7.77 ; Cadre flottant affiche par un navigateur reconnaissant les 
cadres 

En revanche, si 1' agent utilisateur ne reconnait pas les cadres ou est 
configure pour ne pas les afficher, le fichier cadreflottant.html sera 
affiche. 
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Cependant, vous pouvez visiter le ] place a 1'intene'ur d'un teste. 



Figure 7. 12 : Cadre flottant affiche par un navigateur qui ne reconnalt pas 
les cadres 

Un clic sur le lien propose a cet effet affiche le contenu du cadre flottant 
dans une fenetre propre. 
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Figure 7. 13 : 

Le contenu du cadre 
flottant (celui du fichier 
cadreflottant2. html] est 
affiche dans une fenetre 
propre 
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Element OBJECT 

Vous pouvez egalement incorporer un document HTML dans un autre 
document HTML avec l'element object, deja aborde au Chapitre 6 
ainsi que dans la section precedente, et sur lequel nous reviendrons 
encore. 



7.8. Travail avec les jeux 
d'encadrement 

Lorsque vous concevez un jeu d'encadrement, vous devez vous souvenir 
que son aspect a l'ecran peut differer de ce que vous aviez en tete, et ce 
pour de multiples raisons. Par exemple, chaque barre de defilement 
presente sur un cadre reduit l'espace disponible a l'ecran, ce qui rend le 
site de plus en plus exigue et inconfortable. Pour ameliorer le confort, 
reduisez le nombre de cadres. 

Commencez par bien definir les raisons pour lesquelles vous souhaitez 
employer un cadre dans vos pages HTML. Desirez-vous faire de la 
place pour une banniere publicitaire ? Inclure une barre de navigation 
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sur un cote de l'ecran (ou en haut ou en bas) ? Comparer deux 
documents cote a cote ? Mieux vaut toujours tracer par ecrit un schema 
de la structure de jeu d'encadrement que vous souhaitez concevoir, en y 
inscrivant les noms attribues aux cadres. 

Les principales questions auxquelles vous devez imperativement 
repondre prealablement a la conception d'un jeu d'encadrement sont les 
suivantes : 

Quel cadre sera susceptible de subir les modifications les plus 
frequentes ou les plus nombreuses ? 

Comment les utilisateurs navigueront-ils dans ce jeu 
d'encadrement ? 

En quoi ce jeu d'encadrement aidera-t-il votre public a apprecier 
le site ? 

D'une certaine facon, les problemes de conception d'un jeu 
d'encadrement sont tres proches de ceux rencontres lors de la 
conception de tableaux. 

Un des principaux problemes poses par les cadres, comme avec les 
tableaux, concerne la taille de l'ecran. Si toutefois, dans une conception 
HTML typique, vous ne vous preoccupez generalement que de la largeur 
de l'ecran lors de la realisation de grands tableaux de presentation, les 
cadres occupent la totalite de la fenetre du navigateur. 

La plupart des utilisateurs naviguent avec une taille de fenetre 
maximale : celle-ci occupe tout l'ecran disponible. Ceci signifie que les 
resolutions type des ecrans ont un role a jouer. Les resolutions les plus 
frequentes sont desormais par ordre decroissant : 1024 x 768 (56 %), 
1280 x 1024 (16 %) et 800 X 600 (12 %) et, les autres resolutions (1280 
x 800 et 1152 x 864) ne representant que moins de 8 % du pare. II est 
done raisonnable de considerer que l'ecran de l'utilisateur possede une 
dimension au moins egale a 800 pixels de large pour 600 pixels de haut : 
tenez-en compte lors de votre conception, par exemple pour la taille 
d'une barre de navigation. 

N'oubliez en outre pas que les cadres sont officiellement apparus dans 
HTML 4.0. Des agents utilisateurs plus anciens ne pourront peut etre pas 
reconnaitre un ou plusieurs des attributs decrits dans ce chapitre. Par 
exemple, « cibler un cadre » ou les attributs de largeur et de delimitation 
peuvent ne pas fonctionner correctement avec des navigateurs anciens. 
Pire encore, ils peuvent fonctionner d'une facon autre que celle 
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attendue. Meme si la grande majorite des navigateurs prennent en 
charge depuis un temps certain la quasi-totalite des attributs abordes 
dans ce chapitre (comme Microsoft Internet Explorer et Netscape 
Navigator depuis leur version 3.0), mieux vaut toujours tester vos pages 
avec d'autres navigateurs avant de lancer votre site. 

Sachez enfin que les jeux d'encadrement peuvent rendre la navigation 
d'avant en arriere, par le biais de l'historique de l'agent utilisateur, plus 
compliquee pour les utilisateurs. 



7.9. Resume 



Les cadres ou frames sont largement employes en HTML. lis 
constituent le principal moyen d'afficher plusieurs HTML sur le 
meme ecran au meme moment. 

Un fichier de definition de jeu d'encadrement possede une syntaxe 
analogue a celle d'un document HTML ordinaire, mais son code 
differe. lis utilisent un element DOCTYPE different en tete de page, 
et sont depourvus d'element BODY, remplace par un element 

FRAMESET. 

L'element FRAMESET specifie la disposition des vues dans la 
fenetre principale de l'agent utilisateur. 

La specification de l'attribut rows de l'element FRAMESET definit 
le nombre de subdivisions horizontales dans un jeu 
d'encadrement. La specification de l'attribut cols definit le 
nombre de subdivisions verticales. Les deux attributs peuvent etre 
utilises simultanement pour creer une grille. 

Au sein de l'element FRAMESET, les differents cadres sont definis 
a l'aide d'elements FRAME. Un element FRAME definit le contenu 
et l'apparence d'un unique cadre. 

L'attribut name d'un element FRAME assigne un nom au cadre 
concerne. Ce nom est employe comme cible des liens : le cadre 
dans lequel ouvrir un document. Un nom de cadre doit 
imperativement commencer par un caractere alphanumerique. II 
existe toutefois un certain nombre de « noms reserves » qui 
possedent des proprietes speciales et debutent par un trait de 
soulignement ( _blank, _self, _parent, et _top). 

L'attribut src d'un element FRAME specifie la localisation du 
contenu initial a placer dans le cadre defini par l'element FRAME. 
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Vous pouvez specifier le mode de restitution d'un cadre par 
l'agent utilisateur a l'aide de differents attributs. noresize 
indique a l'agent utilisateur que le cadre ne doit pas etre 
redimensionnable, l'attribut scrolling autorise ou interdit la 
presence de barres de defilement, f rameborder specifie la taille 
(ou 1' absence) de la bordure du cadre. Les attributs 
marginwidth et marginheight specifient respectivement la 
quantite d'espace a laisser entre le contenu du cadre et ses marges 
laterales (gauche et droite) et haute et basse. 

Par defaut, tout lien present dans un cadre ouvre sa reference dans 
le meme cadre. Pour ouvrir un lien dans un autre cadre, vous 
devez utiliser l'attribut target, suivi du nom du cadre cible. 
Vous pouvez definir un cadre cible par defaut pour les liens du 
cadre en employant l'attribut target dans un element BASE. 

HTML 4.01 recommande des regies de priori tes que devraient 
respecter les agents utilisateurs pour determiner le cadre cible 
dans lequel charger une ressource liee. 

II est possible d'imbriquer un nombre quelconque de jeux 
d'encadrement. 

II est possible de partager des donnees entre plusieurs cadres en 
incluant celles-ci au moyen de l'element OBJECT. L'element 
OBJECT doit etre place dans l'element HEAD du document de 
definition du jeu d'encadrement et nomme a l'aide d'un attribut 
id. Tout document qui est le contenu d'un cadre dans le jeu 
d'encadrement peut alors se referer a cet identifiant. 

II est preferable de placer un element NOFRAMES dans l'element 
FRAMESET afin d'offrir un contenu de remplacement aux agents 
utilisateurs qui ne reconnaissent pas les cadres ou ne sont pas 
configures pour afficher ces cadres. 

Vous pouvez inserer un cadre en ligne au sein d'un bloc de texte 
a l'aide de l'element IFRAME. Un tel cadre ne peut jamais etre 
redimensionne. 

D'une certaine facon, les problemes de conception d'un jeu 
d'encadrement sont tres proches de ceux rencontres lors de la 
conception de tableaux. Un des principaux problemes poses, 
comme avec les tableaux, concerne la taille de l'ecran. II est de 
nos jours raisonnable de considerer que l'ecran de l'utilisateur 
possede une dimension au moins egale a 800 pixels de large pour 
600 pixels de haut. 
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Vous avez remarque dans les chapitres precedents que les attributs et 
certains elements relatifs a la mise en forme et a la presentation de pages 
Web etaient frequemment, signales comme deconseilles en faveur du 
recours aux feuilles de style. 

Lors de 1' apparition du Web, les principaux utilisateurs etaient 
essentiellement des scientifiques, des enseignants et des militaires, plus 
concernes par le contenu des documents que par leur presentation. Le 
developpement fulgurant du World Wide Web et l'arrivee de personnes 
issues d' horizons tres differents a mis rapidement en evidence que les 
limites de HTML constituaient une source de frustration perpetuelle. 
Nombreux furent alors ceux qui durent contourner les limites de mise en 
forme d'HTML par des methodes aussi diverses qu'astucieuses. Aussi 
louable qu'ait pu etre le but d'ameliorer la presentation des pages Web, 
les techniques employees pour ce faire possedaient des effets 
secondaires malheureux : leur fonctionnement n'etait pas garanti et 
restait largement dependant de divers facteurs, dont 1' agent utilisateur. 
Les principales methodes employees etaient : 

L'emploi d'extensions HTML proprietaries. 

La conversion du texte en image. 

Le recours a des images pour controler l'espacement. 

L'emploi de tableaux pour la mise en page. 

L'ecriture d'un programme plutot que le recours a HTML. 

Ces techniques accroissent considerablement la complexite des pages 
Web, offrent peu de souplesse, souffrent de problemes d'interoperabilite 
et constituent une epreuve penible pour les personnes presentant des 
handicaps. 

Les feuilles de style HTML represented un progres majeur qui 
developpe les possibilites d' amelioration de 1' aspect des pages Web. 
Elles resolvent tous ces problemes en meme temps qu'elles remplacent 
l'eventail limite des mecanismes de presentation HTML. Avec les 
feuilles de style, il devient facile de specifier l'espacement entre les 
lignes de texte, l'indentation des lignes de texte, la couleur utilisee pour 
le texte et 1' arriere-plan, la taille et le style de la police et quantite 
d'autres details. 

Les feuilles de style HTML peuvent etre mises en oeuvre de trois facons 
differentes : 

Au sein d'un element. 
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Dans l'element HEAD du document. 
A l'aide d'une feuille de style externe. 

Ces trois methodes ne sont pas exclusives les unes des autres. Ce 
chapitre etudie les differentes modalites de mise en oeuvre des feuilles de 
style. 

Elements et attributs etudies dans ce chapitre : 

STYLE 

LINK 

color, background-color, font-, text-, margin-, border-, 

padding-, height, width, overflow, float, position, left, 

top, z-index, clip, visibility, media 

speak, spell-out, cue-, pause-, azimuth, elevation, 

voice-family, volume, silent, speech-rate, richness, 

stress 

@media 



8.1. Introduction 

Une des motivations sous-jacentes aux feuilles de style, outre celles 
citees plus haut, etait d'ameliorer la separation de la logique de structure 
(definie par les elements HTML) de celle de la presentation (desormais 
definie par les feuilles de style). Cette demarche de separation des 
differentes couches de logique, de plus en plus frequente en matiere de 
programmation, s'inspire du modele MVC (voir encadre). 



Separation de la logique et de la presentation : le modele MVC 
REWRUUE ( Mo del-View-Controller) 

Le modele MVC est un modele de conception logicielle largement 
repandu, initialement cree dans les annees 1980 par Xerox PARC pour 
Smalltalk-80. II a ete plus recemment recommande comme modele pour la 
plate-forme J2EE de Sun et gagne fortement en popularity aupres des 
developpeurs ColdFusion et PHP. C'est un outil fort utile au developpeur, 
quel que soit le langage utilise, meme s'il presente quelques 
inconvenients. 

Le modele de conception MVC impose la separation entre les donnees, 
les traitements et la presentation. Toute application est ainsi divisee en 
trois composants fondamentaux : le modele, la vue et le controleur. 
Chacun de ces composants possede un role bien defini. 
La vue est l'interface avec laquelle interagit l'utilisateur. Pour les 
applications Web, c' etait historiquement une interface HTML, mais cela 
peut egalement etre une interface Macromedia Flash ou d' autres langages 
de balises comme XHTML, XML/XSL, WML et les services Web. Le 
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MVC sait gerer l'utilisation de differentes vues pour une meme 
application. Aucun traitement n'est effectue dans la vue : celle-ci ne 
sert qu'a afficher les donnees et a permettre a l'utilisateur d'agir sur 
celles-ci. Le deuxieme composant du MVC, le modele, represente les 
donnees et les regies de travail (la ou s'effectuent les traitements). Les 
bases de donnees en font partie, de meme que des objets comme les EJB 
et composants ColdFusion. Les donnees renvoyees par le modele sont 
independantes de la presentation : le modele ne realise aucune mise en 
forme. Un meme modele peut afficher ses donnees dans plusieurs vues. 
Enfin, le controleur interprete les requetes de l'utilisateur et appelle le 
modele et la vue necessaires pour repondre a celles-ci. Lorsque 
l'utilisateur clique sur un lien ou soumet un formulaire HTML, le 
controleur ne produit rien et n' effectue aucun traitement : il intercepte 
simplement la requete pour determiner les modeles et vues qui doivent 
etre associes. 

Pour resumer, une requete utilisateur est interpretee par le controleur, qui 
determine les portions du modele et de la vue qui doivent etre appelees. 
Le modele gere les interactions avec les donnees et applique les regies de 
travail, puis renvoie les donnees. Le controleur selectionne enfin une vue 
et lui transmet les donnees. 

En appliquant ce modele a HTML, la feuille de style serait la vue, 1' agent 
utilisateur le controleur et le document HTML le modele. 



La specification HTML 4.01 ne lie pas HTML a un langage de style 
particulier. Cela permet l'utilisation d'un panel de langages (les plus 
simples pour la majorite des utilisateurs et les plus complexes pour une 
minorite d'utilisateurs aux besoins tres specialises). Le langage le plus 
frequemment employe est CSS (Cascading Style Sheet), fonde sur la 
Recommandation W3C CSS niveau 2 (dont la version revisee au 7 juin 
2005 est disponible en francais a l'adresse www.yoyodesign.org/doc/w3c 
/css2/cover.html) et la version 2. 1 release candidate (disponible en anglais 
a l'adresse http://www.w3.org/TR/CSS21/). C'est celui dont nous nous 
servirons dans cet ouvrage. La specification CSS niveau 3 est en cours 
d'elaboration (voir http://www.w3.org/Style/CSS/current-work). Souvenez- 
vous toutefois que d'autres langages de feuille de style sont possibles en 
HTML. 

Pour employer dans vos pages des feuilles de style, vous devez specifier 
le langage employe, a l'aide d'un element META. 

1 Ouvrez le fichier index.html dans le Bloc-Notes. 

2 Modifiez le numero de version en 3.8.1 (il s'agit la encore d'une 
modification majeure) : 

<META name="version" content="3 . 8 . 1"> 
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3 Ajoutez juste en dessous, avant la balise </HEAD>, 1' element 
MET A suivant : 

<META http-equiv="Content-Style-Type" 
content="text/css"> 

4 Enregistrez le fichier index.html sans modifier son nom. 

5 Repetez les etapes 1 a 4 pour les fichiers passions.html, 
region.html, famille.html et barrenav.html. 

6 Ouvrez le fichier accueil.html. Modifiez son numero de version, 
ajoutez le nouvel element META, puis gardez ce fichier ouvert 
dans le Bloc-Notes. 

Comme vous devez l'avoir compris, il s'agit d'une ligne essentielle a 
ajouter desormais systematiquement dans 1' element HEAD de tout fichier 
HTML. 



8.2. Attribut style 



La facon la plus simple de definir un style dans une page, pour rester en 
conformite avec la specification HTML 4.01, consiste a le faire en ligne 
a l'aide de l'attribut style. Cet attribut peut etre employe avec tous les 
elements HTML sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, 
SCRIPT, STYLE et TITLE. 

Passons a la pratique. 

1 Revenez au fichier index.html, qui devrait etre ouvert dans votre 
Bloc-Notes. 

2 Modifiez comme suit la ligne de litre (1' element HI), en ajoutant 
un attribut style : 

<H1 style=" font-size : 32pt; text-align: center; color: 

X green">Ma page d' accueil</Hl> 

3 Enregistrez le fichier sans modifier son nom. 

Lancez votre navigateur, puis ouvrez le fichier index.html (voir 
Figure 8.1). 

La syntaxe de la valeur de 1' attribut style est determinee par le langage 
de feuille de style par defaut. Par exemple, pour un style en ligne CSS, 
vous devez employer la syntaxe de bloc de declaration CSS. La syntaxe 
generate CSS de l'attribut style est done : 
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Figure 8. 1 : 

Page d'accueil, avec 
titre principal, 
modifiee a I'aide 
d'un attribut style. 



style ="proprietel : valeur; propriete2 = valeur; ... 
proprieten = valeur" 

Pour specifier les informations de style de plusieurs elements, mieux 
vaut preferer l'element STYLE. 



8.3. Element STYLE 

L'element STYLE permet de rassembler des regies de style dans l'en-tete 
du document, qui vont ainsi s'appliquer a la totalite des elements 
concernes du document. HTML autorise un nombre quelconque 
d'elements STYLE dans la section HEAD d'un document. 

La syntaxe des donnees de style depend du langage de feuille de style. 

Certaines implementations de feuille de style peuvent autoriser une plus 
grande variete de regies dans l'element STYLE que dans l'attribut 
style. D'une facon generale, CSS distingue les selecteurs (la 
definition d'un element) et les definitions (les proprietes de presentation 
affectees a cet element). CSS permet de declarer les regies a l'interieur 
d'un element STYLE pour : 

Toutes les instances d'un element HTML particulier (par exemple, 
tous les elements P, tous les elements HI, etc.). 

HI [definitions] 
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Toutes les instances d'un element HTML appartenant a une classe 
particuliere (par exemple, les elements dont l'attribut class 
possede une valeur specifiee). 

* [class=valeur] {definitions} 

Les instances uniques d'un element HTML (par exemple, un 
element dont l'attribut id possede une valeur specifiee). 

element [id=valeur] {definitions} 

II ne s'agit la toutefois que d'exemples simplissimes : la version 3 des 
selecteurs CSS (http://www.w3.org/Style/css3-selectors-updates/WD-css3- 
selectors-200T0126.fr.html) propose des selecteurs nombreux et tres 
sophistiques, capables de repondre desormais a pratiquement toutes les 
situations (reportez-vous au tableau 13.12 du Chapitre 13, « Annexes »). 
Les possibilites d'enrichissement d'un contenu a l'aide d'une feuille de 
style sont desormais extremement riches. En outre, CSS permet de 
combiner a l'aide d'operateurs les selecteurs simples, ce qui elargit 
encore le champ des possibilites. 



A 



Sensibilite a a casse dans les selecteurs 

Dans les selecteurs, la sensibilite a la casse des noms d' elements et 
d'attributs ainsi que des valeurs des attributs depend du langage du 
document. Par exemple, les noms d'elements sont sensibles a la casse en 
XML mais pas en HTML. 



Les regies de preseance et d'heritage des regies de style dependent du 
langage de feuille de style. 

Examinons successivement ces trois possibilites. 



Definition du style de la totalite 

des occurrences d'un element donne 

L'element STYLE permet de definir facilement l'aspect d'elements 
HTML specifies. Voici comment proceder : 

1 Ouvrez dans le Bloc-Notes le fichier accueil.html. 

2 Enregistrez-le en l'etat sous le nom accueil_3_8_1.html. Modifiez 
ensuite son numero de version : 

<META name="version" content="3 . 8 . 2"> 

LE GUIDE COMPLET 283 



Chapitre 8 



Feuilles de style 



3 Avant la balise de fermeture de l'element HEAD, ajoutez un 
element STYLE dote du contenu suivant : 

<STYLE type="text/css"> 

HI {border-width: 1; border: solid; 
text-align: center; 
font-size: 32pt; color: green} 
H2 {font-size: 20pt; text-align: center} 
P {font-size: 16pt; text-align: center} 
UL {font-size: 16 pt; text-align: center} 
LI {font-size: 14pt; text-align: left; 

margin-left: 40%} 
ADDRESS {text-align: center} 
</STYLE> 
</HEAD> 

4 Supprimez l'attribut style de l'element HI ainsi que l'attribut 
align de l'element H2 (puisque vous avez defini ces styles dans 
l'en-tete), ainsi que les balises de l'element DIV (les styles des 
elements contenus sont egalement definis dans l'en-tete). Comme 
vous avez defini un cadre autour de l'element HI, vous pouvez 
egalement supprimer la regie horizontale qui le suit (l'element 
hr). 

5 Enregistrez le fichier d'abord sous le nom accueil_3_8_2.html, puis 
sous le nom accueil.html. 

Lancez votre navigateur, puis ouvrez le fichier index.html. Remarquez 
que vous lancez index.html puisque celui-ci charge automatiquement 
accueil.html dans un jeu d'encadrement (voir Figure 8.2). 

Cette page ne differe que tres peu de la precedente. Nous examinerons 
plus en detail dans la suite de ce chapitre les differents attributs qu'il est 
possible d'employer dans une feuille de style, mais regardez deja ce que 
nous avons fait ici : 

Dans l'element HI, la propriete border-width cree un cadre 
epais d'un pixel, la propriete border definissant son aspect (ligne 
pleine). 

La propriete color, deja rencontree, definit la couleur du texte. 

La propriete font-size, egalement deja rencontree, definit la 
taille de la police. Nous avons employe des tailles decroissantes 
selon les cas. 
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Fichier Edition AJTithage A|ler a Marque-pages Oujjls ? 
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<^1 - L^ - (§? I Jl @ | D file:J/JG:JHTMLJMon%205ite/SJ jj © 01! [JC[ 

passions ^B I 



Ma page d'accueil 



Bienvenue sur mon site. 

Yous trouverez sm ce site des informations 

♦ sur ma region : 

♦ sm' ma famiJle ; 

♦ sm' mes passions. 

Naviguez dans le site a l'aide de la ban e de navigation proposes 
ci-dessus. 



et son>. Igl . 

rencontre sur le site. 



Figure 8.2 : Page d'accueil avec, cette fois, recours a un element STYLE. 

La propriete text-align, deja rencontree aussi, definit 
l'alignement du texte. Les elements HI, H2, P, UL et ADDRESS 
sont definis comme devant etre centres a l'ecran. En revanche, 
l'element LI doit etre aligne a gauche. 

Enfin, la propriete margin-left: 4 0% de l'element LI definit 
une marge gauche egale a 40 % de l'espace disponible : l'effet 
obtenu avec cette marge et l'alignement a gauche est plus 
satisfaisant que le centrage precedent. 

Grace a la definition des styles dans l'element HEAD, toute occurrence 
des elements definis sera rendue de facon homogene, selon les criteres 
specifies. Un enorme gain de temps et la garantie de disposer d'un effet 
homogene ! 

Effet homogene, mais peut-etre trop. Vous pourriez souhaiter definir des 
types de presentation particuliers pour certaines occurrences d'un 
element precis . Cela est possible, grace a l'emploi de l'attribut classe. 
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Definition du style de certaines occurrences 
d'un element donne 

Souvenez-vous : nous avons prevu dans la page d'accueil une place pour 
des remarques legales, mais sans encore les creer. Si nous les mettons 
dans un element P, elles possederont une taille de police et un centrage 
automatiques, compte tenu de la feuille de style actuelle. II faut done 
indiquer que, pour les elements P qui appartiennent a une classe 
particuliere, 1' aspect doit etre autre. Procedez comme suit : 

1 Revenez dans le Bloc-Notes au fichier accueil.html. 

2 Modifiez son numero de version : 

<META name="version" content="3 . 8 .3"> 

3 Ajoutez dans l'element STYLE, juste apres la definition de 
1' element P, une nouvelle definition : 

P (font-size: 16pt; text-align: center} 
P. legal {font-size: 8pt; font-variant: 
small-caps} 

UL {font-size: 16 pt; text-align: center} 

4 Remplacez le commentaire <! — Des remarques legales ne 
seraient pas superf lues — > par l'element P suivant : 

<P class="legal">© 2005 votrenom - 
Tous droits ré servé s</P> 

5 Enregistrez le fichier d'abord sous le nom accueil_3_8_3.html, puis 
sous le nom accueil.html. 

<HEAD> 
<STYLE type="text/css"> 

HI .maclasse {border-width: 1; border: solid; 
text-align: center} 
</STYLE> 
</HEAD> 
<B0DY> 
<H1 class="maclasse"> Cet HI est touché 

par notre style </Hl> 
<H1> Celui-ci ne l'est pas </Hl> 
</B0DY> 

Ouvrez le fichier index.html dans votre navigateur (voir Figure 8.3). 

Le paragraphe des remarques legales, bien qu'etant un element P, est 
presente differemment puisque nous avons specifie que cet element 
appartenait a la classe legal. 
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Figure 8.3 : Definition d'un style pour une classe d'elements particuliere 
Remarquez l'attribut type de 1' element STYLE. Sa syntaxe est : 

type = " type_de_contenu" 

Cet attribut specifie le langage de feuille de style par defaut du contenu 
de 1' element. II surclasse, lorsqu'il est present et qu'elle est specifiee, la 
feuille de style par defaut (defmie par <META http-equiv= 
"Content-Style-Type" content="type_de_contenu"> dans 
1' element HEAD). Le langage de feuille de style est specifie comme un 
type de contenu (par exemple, "text/ess"). Si la definition de la 
feuille de style par defaut est absente, il est indispensable de fournir une 
valeur pour cet attribut : il est depourvu de valeur par defaut. 



Definition du style d'une unique occurrence 
d'un element donne 

Vous pourriez egalement souhaiter qu'un element unique dans votre, 
voire vos pages respecte un style particulier. Vous avez alors recours a 
l'identifiant de cet element (l'attribut id), lequel doit etre unique dans le 
document. La syntaxe est la suivante : 

<STYLE> 

#monid (proprietel :valeur; propriete2 : valeur;... 

proprieten: valeur} 
</STYLE> 
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La mise en oeuvre serait comme suit : 

<P id="monid"> Ce paragraphe est soumis au style </P> 
<P> mais pas celui-la. </P> 

Vous pourriez vous poser la question de l'interet de definir dans la 
feuille de style d'en-tete un element unique : ne serai t-il pas plus simple 
de dennir un attribut style dans cet element ? 

La reponse tient a ce que nous avons deja souligne a plusieurs reprises : 
HTML doit etre un langage de specification de contenu. Son but est 
avant tout la structure et non la presentation. Mieux vaut done separer au 
maximum la logique structurelle (les elements HTML et leur contenu) 
de la logique de presentation (la feuille de style). 



Elements DIV et SPAN 

Vous avez compris qu'il etait possible de definir des informations de 
style pour pratiquement tous les elements HTML. Deux elements, DIV 
et SPAN, meritent cependant des mentions particulieres. 

La plupart des elements HTML possedent deja une mise en forme 
« integree ». Un paragraphe de texte place une ligne avant et apres 
lui-meme, et utilisera une police differente de celle des autres elements 
dans certains navigateurs. 

Dans la mesure ou les feuilles de style sont supposees combiner les 
indications structurelles et les indications de mise en forme, il fallait 
creer des elements « neutres ». L element DIV est un element de type 
bloc, ce qui signifie qu'une ligne sera inseree avant et apres lui. En 
termes de structure, il ne correspond qu'au souhait de lui voir presenter 
un aspect particulier, different du comportement des elements de 
structure classique. II ne possede pourtant aucune autre mise en forme 
particuliere par defaut, si bien que le texte qui y figure apparaitra comme 
texte par defaut (sauf s'il est specifie autrement). 

SPAN fonctionne de la meme facon, si ce n'est qu'il s'agit d'un element 
ligne. Ces deux elements peuvent etre definis dans une feuille de style 
comme n'importe quel autre element. 

En consequence, vous pouvez utiliser ces elements pour inserer des 
styles concus entierement sur la structure de la page, plutot que selon ses 
elements de conception. Par exemple, si la premiere section de votre 
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document contient les informations les plus importantes, placez-les dans 
un element DIV auquel vous attribuez un style particulier : une couleur 
speciale, une police caracteristique ou un texte en italique. Tout son 
contenu, y compris les litres et les images, heriteront du style DIV. 

De ce fait, l'emploi de ces elements conjointement aux feuilles de style 
permet un developpement HTML pratiquement illimite, particulierement 
quand ils sont employes avec les attributs class et id: cela permet de 
developper potentiellement une infinite de types de presentation 
differents. Par exemple : 

<STYLE type="text/css"> 

HI {border-width: 1; border: solid; text-align: center; 
font-size: 32pt; color: green} 

P {font-size: 16pt; text-align: center} 

DIV {font-size: 16pt; text-align: center} 

DIV.it {font-style: italic} 

DIV.g {font-weight: bold} 

DIV.itg {font-style: italic; font-weight: bold} 

SPAN.it {font-style: italic} 

SPAN.g {font-weight: bold} 

SPAN.itg {font-style: italic; font-weight: bold} 
</STYLE> 

Regardez le fichier suivant (volontairement minimaliste), dans lequel les 
parties importantes sont presentees en gras : 

Listing 8-1 : FichierSTYLEDIUSPAN.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 
<HEAD> 

<TITLE>"Elément STYLE avec des 

éléments DIV et SPAN "</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META http-equiv="Content-Style-Type" content="text/css"> 
<STYLE type="text/css"> 
HI {text-align: center} 

P {font-size: 16pt; text-align: center} 
DIV {font-size: 16pt; text-align: center} 
DIV.it {font-style: italic} 
DIV.g {font-weight: bold} 

DIV.itg {font-style: italic; font-weight: bold} 
SPAN.it {font-style: italic} 
SPAN.g {font-weight: bold} 

SPAN.itg {font-style: italic; font-weight: bold} 
</STYLE> 
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</HEAD> 
<BODY> 

<Hl>Elément <CODE>STYLE</CODE> avec 

des éléments <CODE>DIV</CODE> 
et <C0DE>SPAN</C0DEX/H1> 
<P>Ceci est un paragraphe normal. </P> 

<DIV class="it">Ceci est un paragraphe en italiques</DIV> 
<DIV class="g">Ceci est un paragraphe en gras</DIV> 
<DIV class="itg">Ceci est un paragraphe en italiques gras 

</DIV> 
<P>Ceci est un paragraphe normal, avec quelques mots 
<SPAN class="it">en italiques</SPAN>, 
quelques-uns <SPAN class="g">en gras</SPAN> et d'autres 
<SPAN class="itg">en italiques gras</SPAN>.</P> 
</BODY> 
</HTML> 

Examine dans votre navigateur, ce fichier affiche ce qui est presente 
dans la figure suivante. 



Ua..,.l.,l,.IIILi.'I.IW."J!WHlJ.'l!t-l.' 
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Element style avec ties 
elements div et span 

Ceci est 1111 paragraphe normal. 

Ceci est un paragraphs en UaUquss 

Ceci est un paragraphe en gras 

Ceci est un paragraph? tit italiques gras 

Ceci est un paragraphe normal, avec quelques 

mots ?}t italiques, quelques-uns en gras et 

d'autres en italiques gras. 



zl 



Figure 8.4 : 

Definition d'un style pour des classes 
d elements DIV et SPAN 



Le gain de saisie semble ici relativement faible, mais imaginez que vous 
ayez a modifier la taille et le type de la police, sa couleur, l'alignement, 
etc. 

Remarquez en outre dans cette figure que les elements DIV des classes 
it, g et itg heritent du style defini pour 1' element generique DIV : ici, 
la taille de police et le centrage. Nous reviendrons par la suite sur cette 
notion d'heritage, mais sachez des a present qu'un style herite des 
caracteristiques par defaut de son style parent. 
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Attribut media 

HTML permet aux auteurs de specifier les documents qui exploitent les 
caracteristiques du medium sur lequel le document doit etre restitue (par 
exemple : ecran graphique, ecran de television, appareil de poche, 
navigateur a synthese vocale, appareil tactile braille, etc.). Cela ouvre 
aux utilisateurs l'acces aux pages Web au moyen d'une grande variete 
d'appareils. 

Les feuilles de style s'appliquent a un medium specifique ou a un 
groupe de medias. Une feuille de style prevue pour un ecran peut etre 
eventuellement utilisable pour 1' impression, mais sera de peu d'utilite 
pour un navigateur a synthese vocale. Cette specification permet de 
definir les categories generales de medias auxquelles peut s'appliquer 
une feuille de style donnee. Ceci permet aux agents utilisateurs d'eviter 
la recherche de feuilles de style inappropriees. Les langages de feuilles 
de style peuvent inclure des mecanismes decrivant les dependances aux 
medias dans une meme feuille de style. 

L'attribut media de l'element STYLE specifie le media de destination 
desire pour les informations de style. Cela peut etre un descripteur de 
media unique ou une liste de descripteurs, separes par des virgules. La 
valeur par defaut de cet attribut est screen, soit un ecran d'ordinateur 
(le cas le plus frequent). Sa syntaxe est la suivante : 

media = " descripteur_mediuml , descripteur_medium2, . . . 
descripteur_medi umn " 

Les valeurs possibles et les significations de celles-ci sont presentees 
dans le tableau suivant. 



Tableau 8. 1 : Descripteurs de medias 


Descripteur de 
medium 


But 


screen 


Ecrans d'ordinateurs non pagines 


tty 


Peripherique utilisant une grille de caracteres fixe, 
comme un telex. 


tv 


Peripheriques de type television 


projection 


Videoprojecteurs 


handheld 


Peripheriques tenus a la main [en principe ecran de 
petite taille et faible bande passante) 
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Tableau 8. 1 : Descripteurs de medias 


Descripteur de 
medium 


But 


print 


Materiaux opaques pagines et documents vus a 
I'ecran en mode Apercu avant impression 


braille 


Peripherique a rendu tactile braille 


embossed 


Imprimantes a pagination braille 


speech 


Synthetiseurs de parole. Anciennement aural en CSS 
2.0. 


all 


Tous peripheriques 



Par exemple, les declarations des exemples suivants s'appliquent aux 
elements HI. Pour une projection dans une reunion de travail, toutes 
leurs instances apparaitront en bleu. Pour une impression papier, toutes 
les instances seront centrees. 

<STYLE type="text/css" media="projection"> 

HI (color: blue) 
</STYLE> 
<STYLE type="text/css" media="print"> 

HI (text-align: center} 
</STYLE> 

Le choix du support est particulierement interessant quand il s' applique 
aux feuilles de style externes, dans la mesure ou les agents utilisateurs 
peuvent economiser du temps en ne chargeant a partir du reseau que les 
feuilles de style qui concernent le peripherique courant. Nous 
reviendrons done sur ce sujet lors de l'etude des feuilles de style 
externes. 



Masquage du contenu de I'element STYLE 

Les agents utilisateurs qui ne reconnaissent pas les feuilles de style ou le 
langage de feuille de style specifique employe par un element STYLE 
doivent dissimuler le contenu de I'element STYLE. La restitution du 
contenu de cet element en tant que partie du texte du document constitue 
une erreur. Certains langages de feuilles de style gerent une syntaxe 
pour dissimuler le contenu aux agents utilisateurs non conformes. C'est 
le cas de CSS. 

1 Revenez dans le Bloc-Notes au fichier accueil.html. 
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2 Modifiez son numero de version : 

<META name="version" content="3 . 8 . 4"> 

3 Modifiez comme suit 1' element STYLE : 

<STYLE type="text/css"> 
<! — 

HI {border-width: 1; border: solid; text-align: center; 

font-size: 32pt; color: green} 
H2 {font-size: 20pt; text-align: center) 
P {font-size: 16pt; text-align: center} 
P. legal {font-size: 8pt; font-variant: small-caps} 
UL {font-size: 16 pt; text-align: center} 
LI {font-size: 14pt; text-align: left; margin-left: 40%} 
ADDRESS {text-align: center} 
— > 
</STYLE> 

5 Enregistrez le fichier d'abord sous le nom accueil_3_8_4.html, puis 
sous le nom accueil.html. 

Ouvrez le fichier index.html dans votre navigateur. Vous devriez obtenir 
quelque chose de similaire a ce qui est presente dans la figure suivante, 
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Figure 8.5 : Le masquage optionnel du contenu de /'element STYLE reste 
sans consequence si I'agent utilisateur reconnalt cet element 

soit quelque chose de parfaitement identique a ce qui etait presente dans 
celle-ci. 

La seule difference est qu'un agent utilisateur qui ne reconnait pas 
l'element STYLE n'affichera pas son contenu comme du texte. 
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Figure 8.6 : Definition d'un style pour une classe d 'elements particuliere 

En poussant le raisonnement a propos de la separation de la structure et 
de la presentation a sa conclusion logique, la separation doit etre encore 
plus drastique et les styles definis dans une ou plusieurs feuilles de style 
externes. C'est ce que nous allons examiner maintenant. 



8.4. Feuille de style externe 

Outre l'objectif de separation de la structure et de la presentation, 
d'excellentes raisons incitent a employer des feuilles de style : 

II est possible de partager des feuilles de style entre plusieurs 
documents et/ou sites. 

Une feuille de style peut etre modifiee sans qu'il soit necessaire 
de modifier le document. 

Les agents utilisateurs peuvent charger les feuilles de style 
selectivement, en fonction des descriptions des medias. 

Cela a toujours ete et reste une des recommandations fondamentales de 
la specification CSS. Le principal avantage est qu'il suffit de modifier 
une feuille de style externe pour modifier 1' aspect general du site. Cela 
est fort pratique si vous utilisez un modele general, chaque page pouvant 
toujours, si necessaire, posseder un aspect particulier grace aux classes 
et aux identifiants. 

Comme cela a ete mentionne plus tot, il est possible de lier une feuille 
de style externe a n'importe quel document Web. Une feuille de style 
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externe s'adapte particulierement bien aux sites de grande taille : il suffit 
de modifier un fichier pour affecter l'integralite du site. En combinaison 
avec un modele de page Web, cela facilite 1' organisation et la 
standardisation du site. 

Une feuille de style n'est rien d' autre qu'un fichier texte qui indique a 
1' agent utilisateur comment restituer votre code HTML. Elle complete 
les elements standard : si l'element HI signale un titre, la balise <H1 
style=" color: green; "> correspond a un titre vert. Une feuille de 
style externe emmene HTML un pas plus avant dans la separation 
reussie entre logique de travail et logique de presentation. 

Pour creer une feuille de style externe, debutez par un fichier texte 
ordinaire. II n'est pas besoin d'utiliser un quelconque element ou balise : 
saisissez simplement vos proprietes a la volee, exactement comme si 
elle etaient incluses dans l'element STYLE d'un fichier HTML. 

Comme nous l'avons vu precedemment, un style se compose de 
proprietes qui possedent des valeurs. Pour le paragraphe vert, la 
propriete est color et sa valeur est green. Vous allez creer votre 
premiere feuille de style. 

1 Ouvrez un document vierge dans le Bloc-Notes. Saisissez ce qui 
suit (vous pouvez egalement effectuer un copier-coller du contenu 
de l'element STYLE du fichier accueil.html, puisque les 
informations sont identiques) : 

/* style. ess : feuille de style pour mon site */ 

HI {border-width: 1; border-style: solid; text-align: center; 

font-size: 32pt; color: green} 
H2 (font-size: 20pt; text-align: center} 
P {font-size: 16pt; text-align: center} 
P. legal {font-size: 8pt; font-variant: small-caps} 
UL {font-size: 16 pt; text-align: center} 
LI {font-size: 14pt; text-align: left; margin-left: 40%} 
ADDRESS {text-align: center} 

Comme vous le voyez, un document .ess ne possede ni 
ouverture ni fermeture. Les commentaires sont encadres de 
symboles /* et */ : un vieux souvenir de syntaxe de 
progr animation. 

2 Enregistrez ce fichier sous le nom style.css. 

Attention, un fichier de feuille de style doit toujours comporter 
une extension .ess. 
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3 Ouvrez le fichier accueil.html. 

4 Modifiez son numero de version : 

<META name="version" content="3 . 8 .5"> 

5 Remplacez l'element STYLE par l'element LINK suivant : 

<LINK rel="STYLESHEET" type="text/css" 
href="style . css"> 

6 Enregistrez le fichier d'abord sous le nom accueil_3_8_5.html, puis 
sous le nom accueil.html. 

Ouvrez le fichier index.html dans votre navigateur. Vous devriez 
obtenir quelque chose de similaire a ce qui est presente dans la figure 
suivante, soit encore une fois quelque chose de parfaitement identique a 
ce qui etait presente Figure 8.3 ou Figure 8.5. La seule difference est que 
les styles sont desormais definis dans une feuille de style externe. 
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Figure 8. 7 : 

Le site employant 
desormais une feuille 
de style externe 



Pour tirer un profit maximum de notre feuille de style, il faut l'appliquer 
aux autres pages de notre site, en completant si besoin les differentes 
specifications. Commencons par le fichier le plus simple, passions.html. 

1 Ouvrez passions.html dans le Bloc-Notes. 

2 Modifiez son numero de version : 

<META name="version" content="3 . 8 . 1"> 

3 Ajoutez l'element LINK identique a celui du fichier accueil.html. 

<LINK rel="STYLESHEET" type="text/css" 
href="style . css"> 
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4 Supprimez les attributs align des elements HI et H2, puisqu'ils 
sont desormais superflus. 

5 Enregistrez le fichier sans modifier son nom. 

Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans la 
barre de navigation sur Mes passions. Vous devriez obtenir quelque 
chose de similaire a ce qui est presente dans la figure suivante, 
c'est-a-dire un aspect beaucoup plus proche de celui de la page 
d'accueil. 
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Figure 8.8 : 

Page Mes passions, employant 
desormais la feuille de style 
externe. 



Les pages Ma region et Ma famille sont un peu plus complexes, 
puisqu'elles font appel a des tableaux. Nous devons done definir un 
style de tableau dans la feuille de style. 

1 Ouvrez style.css dans le Bloc-Notes. 

2 Ajoutez les definitions de style suivantes a la fin du fichier : 

TABLE {width: 100%; border-width: 2; 

border-style : double; text-align: center) 
CAPTION {font-size: 24px; font-weight: bold; 

text-align: center;) 
TH {font-size: 20pt; border-width: 1; 

border-style: solid; text-align: center) 
TD {font-size: 14pt; border-width: 1; 

border-style: solid; text-align: center) 
TD. droit {font-size: 14pt; text-align: right) 

3 Enregistrez le fichier sans modifier son nom. 

4 Ouvrez region.html dans le Bloc-Notes. 

5 Modifiez son numero de version : 

<META name="version" content="3 . 8 . 1"> 
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6 Ajoutez l'element LINK identique a celui des fichiers accueil.html 
et passions.html : 

<LINK rel="STYLESHEET" type="text/css" 
href="style . css"> 

7 Supprimez les attributs align et border du premier tableau, et 
les attributs align, border et width du second tableau. 

8 Remplacez les attributs align=" right" de ses trois elements TD 
par un attribut class="droit", comme dans l'exemple suivant : 

<TH>Temp. Max. </THXTD class="droit">18 °</TD> 

9 Enregistrez votre fichier sans modifier son nom. 

Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans la 
barre de navigation sur Ma region. 
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Figure 8.3 : Page Ma region, employ ant desormais la feuille de style 
externe. 

Similaire, mais pas identique : nous avons en realite legerement modifie 
le contenu de ce fichier, en y ajoutant du contenu et en remplacant les 
caracteres accentues par les entites adequates. Voici son listing complet, 
les modifications etant signalees en gras. 
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Listing 8-2 : region.html version 3.8.1 

<!DOCTYPE html PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML> 
<HEAD> 

<TITLE>Ma ré gion</TITLE> 

<META name="author" content="Fabrice Lemainque"> 
<META name ="version" content="3 . 8 . 1"> 

<META http-equiv="Content-Style-Type" content="text/css"> 
<LINK rel="STYLESHEET" type="text/css" href="style . css"> 
</HEAD> 
<BODY> 

<TABLE summary="Présentation de ma ré gion"> 
<CAPTION>Ma ré gion</CAPTION> 
<TR> 
<TD rowspan="3" width="34%"> 

<!-- Essayer 1' image JPEG — > 
<0BJECT data="Images/coucher de soleil.jpg" 
type= " image /gif " width="100%" 

title="Un coucher de soleil sur le lac de Linciel"> 
<!-- Sinon, le texte --> 
Coucher de soleil sur le lac de Linciel 
</0BJECT> 
</0BJECT> 
</0BJECT> 

</TD> 

<TD colspan="3">Ma ré gion est celebre 
pour ses forSecirc; ts, ses montagnes et ses lacs.</TD> 
</TR> 
<TR> 

<TD>Les forê ts 
<OL> 
<LI>Llanowar 
<LI>Lothlorien 
</UL> 
</TD> 

<TD>Les montagnes 
<UL> 
<LI>Montagnes bleues 
<LI>Moria 
</UL> 
</TD> 

<TD>Les lacs 
<UL> 

<LI>Caldera de Riss 
<LI>Lac de Linciel 
</UL> 
</TD> 
</TR> 
<TR> 
<TD> 
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<TABLE> 

<CAPTION>Données climatologiques</CAPTION> 
<TR> 

<TH>Temp. Max.</THXTD class="droit">18 °</TD> 
</TR> 
<TR> 

<TH>Temp. min.</THXTD class = "droit">6, 6 °</TD> 
</TR> 
<TR> 

<TH>Pluie</TH></THXTD class="droit">682 mm</TD> 
</TR> 
</TABLE> 
</TD> 

<TD colspan="2">Ici, une autre image </TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 

Occupez-vous maintenant du dernier fichier, famille.html. 

1 Ouvrez famille.html dans le Bloc-Notes. 

2 Modifiez son numero de version : 

<META name="version" content="3 . 8 . 1"> 

3 Ajoutez l'element LINK identique a celui des fichiers 
accueil.html , passions.html et region.html : 

<LINK rel="STYLESHEET" type="text/css" href="style . css"> 

4 Supprimez les attributs align de l'element HI. Supprimez les 
attributs border, align, cellspacing, cellpadding et 
width du tableau. 

5 Supprimez les attributs valign des elements TD et remplacez les 
attributs align="right" par un attribut class="droit", 
comme dans l'exemple suivant : 

<TH>Temp. Max. </THXTD class="droit">18 °</TD> 

6 Enregistrez votre fichier sans modifier son nom. 

Ouvrez le fichier index.html dans votre navigateur, puis cliquez dans la 
barre de navigation sur Ma famille (voir Figure 8.10). 

Toutes nos pages presentent desormais un aspect homogene. Imaginez 
maintenant que vous vouliez soudainement modifier la couleur du cadre 
place autour de l'element HI, et definir un retrait a droite et a gauche de 
celui-ci. Rien de plus simple ! 
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Figure 8. 10 : 

Page Ma famille, employant 
desormais la feuille de style 
externe. 



1 Ouvrez le fichier style.css dans le Bloc-notes. 

2 Modinez comme suit la definition du style de 1' element HI : 

HI {margin-left: 15%; margin-right: 15%; border-width: 1; 
border: solid; text-align: center; 
font-size: 32pt; color: blue} 

3 Enregistrez votre fichier. 

Rafraichissez votre navigateur ou ouvrez a nouveau index.html. Cliquez 
successivement sur les liens Ma famille et Mes passions. Tous les 

elements HI ont ete modifies. 
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Figure 8.11 : Une unique modification du fichier de feuille de style se 
repercute sur tous les elements H1 
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Figure 8. IB : 

Une unique modification du fichier de 
feuille de style se repercute sur tous les 
elements H1 



Une seule modification du fichier de feuille de style se repercute sur 
1' ensemble du site. 
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Figure 8. 13 : 

Une unique modification du fichier de feuille de 
style se repercute sur tous les elements H1 

Cet exemple est d'une simplicite deconcertante. Pour voir a quel point 
une feuille de style bien concue peut profondement modifier 1' aspect 
d'un site, visitez www.CSSzengarden.com/ et cliquez sur les differents 
modeles proposes dans le cadre de droite : comme le montrent les deux 
copies d'ecran qui suivent, les differences peuvent etre phenomenales ! 
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Figure 8. 74 ; 

Exemple de f'effet des feuilles de 
style proposees par 
csszengarden. com 
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Figure 8. 15 : Autre exemple de I'effet des feuilles de style proposees par 
csszengarden. com 

Nous reviendrons bientot plus en detail sur les differentes proprietes des 
feuilles de style. Pour le moment, penchons-nous plus avant sur 
l' element LINK. 



Element LINK 

Comme vous l'avez vu dans les exemples precedents, vous liez une 
feuille de style a un document HTML a l'aide de l'element LINK. La 
syntaxe de celui-ci est la suivante : 

<LINK rel="STYLESHEET" type="text/css" 
href =" nomf euilledestyle . css"> 

href est comme d'habitude une URL vers le fichier de feuille de style. 
II semblerait toutefois que les URL absolues se comportent parfois de 
facon erratique : preferez les feuilles de style logees sur le serveur de 
votre site. 

HTML permet d'associer un nombre quelconque de feuilles de style 
externes a un document. Le langage de feuille de style definit comment 



LE GUIDE COMPLET 3D3 



Chapitre 8 



Feuilles de style 



plusieurs feuilles de style externes interagissent (par exemple, les regies 
de « cascade » de CSS). 

II est ainsi possible de specifier plusieurs feuilles de style mutuellement 
exclusives, alors nominees « feuilles de style alternatives ». Cela permet 
d'offrir aux lecteurs plusieurs presentations d'un document. L'utilisateur 
peut selectionner sa feuille de style favorite parmi celles-ci en fonction 
de ses preferences. Par exemple, une feuille de style pour la restitution 
des documents compacts dans une petite taille de police, ou une autre 
specifiant une taille de police plus grande pour une meiileure lisibilite. 
Des feuilles alternatives peuvent viser des utilisateurs ou des medias 
specifiques. Les agents utilisateurs doivent permettre aux utilisateurs de 
choisir entre plusieurs feuilles de style alternatives ainsi que de 
desactiver les feuilles de style. 

II est possible de specifier une feuille de style preferee. Les agents 
utilisateurs doivent appliquer la feuille de style preferee de l'auteur, sauf 
si l'utilisateur selectionne une autre alternative. 

Plusieurs feuilles de style alternatives (y compris la preferee) peuvent 
etre regroupees sous un seul nom de style. Lorsqu'un utilisateur 
selectionne un style nomme, 1' agent utilisateur doit appliquer toutes les 
feuilles de style qui portent ce nom, mais pas celles qui portent un nom 
different. Vous verrez plus loin comment nommer un groupe de feuilles 
de style. 

II est egalement possible de specifier des feuilles de style 
« persistantes » : elles sont appliquees par 1' agent utilisateur en sus des 
eventuelles feuilles de style alternatives. 

Les agents utilisateurs doivent respecter les descripteurs de medium lors 
de 1' application d'une feuille de style. lis doivent egalement permettre 
aux utilisateurs de desactiver entierement les feuilles de style de 
l'auteur : aucune feuille de style n'est appliquee, qu'elle soit persistante 
ou alternative. 

Les attributs de l'element LINK jouent les roles suivants : 

La valeur de l'attribut rel indique si la feuille de style est 
persistante, preferee ou alternative. Si cet attribut possede la 
valeur "stylesheet", la feuille de style est persistante en 
l'absence d'attribut title et preferee si l'attribut title est 
specifie. La feuille de style est en revanche alternative si l'attribut 
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rel possede la valeur "alternate stylesheet" et que la 
feuille est nommee a l'aide de l'attribut title. 

La valeur de 1'attribut type indique le langage de la ressource 
reliee (la feuille de style). Cela evite a 1' agent utilisateur de 
charger une feuille de style dans un langage de feuille de style 
non reconnu. 

La valeur de l'attribut href est un URI, qui indique la 
localisation du fichier de la feuille de style. 

Les agents utilisateurs devraient fournir aux utilisateurs les moyens de 
passer en revue et de choisir les feuilles de style alternatives dans une 
liste. Mieux vaut employer la valeur de l'attribut title comme nom 
pour chaque option. 

Vous pouvez egalement employer un element MET A pour definir la 
feuille de style preferee du document. Par exemple, pour definir comme 
feuille de style preferee une feuille nommee " favorite", placez ce qui 
suit dans 1' element HEAD : 

<META http-equiv="Default-Style" content="favorite"> 

Si plusieurs declarations MET A specifient la feuille de style preferee, 
seule la derniere est retenue. En revanche, si plusieurs elements LINK 
specifient une feuille de style preferee, seul le premier est retenu. Les 
feuilles de style preferees au moyen d' elements MET A ont priori te sur 
celles specifiees avec 1' element LINK. 



Prise en compte du medium 



Pour tenir compte du medium dans la liaison d'une feuille de style, 
servez -vous de l'attribut media dans l'element LINK. Par exemple : 

<LINK rel="stylesheet" type="text/css" 
media="print, handheld" 
href="styles . css"> 

Cet element specifie que cette feuille de style s' applique aux 
peripheriques d' impression et aux peripheriques tenus a la main (comme 
les telephones portables et les assistants electroniques personnels). 

Vous pouvez toutefois egalement utiliser la regie @media a l'interieur 
d'une feuille de style arm que celle-ci puisse transmettre des 
informations a differents types de medias. 
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3media print { 

BODY {font-size: lOpt) 
} 
2media screen { 

BODY (font-size: 12pt} 
} 



Reportez-vous au tableau de la page 29 1 pour voir la liste des 
descripteurs de medium autorises. 



8.5. Proprietes de feuille de style 

Apres avoir vu comment creer une feuille de style, tant locale 
qu'externe, il est temps d'examiner plus en profondeur les proprietes 
qu'il est possible de definir dans une feuille de style. Souvenez-vous 
que, si HTML n'est en rien lie a un langage de feuille de style 
specifique, nous traitons uniquement ici du langage CSS. 



Proprietes de modification de texte 
et de police 

Les proprietes les plus simples concernent la presentation du contenu 
textuel d'un document 

Depuis son invention, 1' element FONT posait quelques problemes aux 
concepteurs de pages Web. II reste tres mal supporte par les anciens 
navigateurs et entre parfois en conflit avec 1' element BODY. Les feuilles 
de style resolvent fort adroitement les problemes poses par FONT. Les 
utilisateurs seront dans un proche avenir en mesure de definir une feuille 
de style par defaut pour leur navigateur, qui contiendra non seulement 
les couleurs et les tailles de police mais egalement les espacements, les 
bordures et les indentations. Ces elements peuvent deja tous etre 
specifies a l'aide d'une feuille de style. 

Les proprietes signalees ici peuvent etre appliquees a tout element qui 
possede un contenu texte. 

Pour modifier la couleur d'une portion de texte, employez la propriete 
color. Par exemple : 

<P style="color: #990000 ; "> 

place le paragraphe en rouge sombre (#990000). 
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Assurez-vous de bien fermer tout element ayant recours a des styles, 
faute de quoi ceux-ci s'appliqueront a l'element suivant. 

Pour modifier la couleur de fond, utilisez background-color 

<P style="color : #990000 ; background-color: #66FFFF ;"> 

pour un texte rouge sombre sur fond bleu clair. Une couleur de fond 
appliquee a du texte fait ressortir le texte en surbrillance. 

La propriete font recouvre plusieurs proprietes apparentees : 

font-style definit le type de la police. Les valeurs possibles 
sont normal, italic et oblique. 

font-weight definit la graisse de la police. Les valeurs 
possibles sont les increments successifs de 100 a 900 : normal 
(equivaut a 4 0), bold (equivaut a 7 0), bolder (graisse 
superieure a celle assignee a une police, plus grasse que celle 
heritee par la police. S'il n'y en a pas, la valeur de graisse de la 
propriete prend la valeur numerique superieure, 1' aspect de la 
police ne changeant pas. Si la valeur heritee est deja egale a 90 0, 
la valeur resultante reste 900), lighter (graisse inferieure a 
celle assignee a une police, moins grasse que celle heritee par la 
police. S'il n'y en a pas, la valeur de graisse de la propriete prend 
la valeur numerique inferieure, 1' aspect de la police ne changeant 
pas. Si la valeur heritee est deja egale a 10 0, la valeur resultante 
devient egalement 100). 

font-size definit la taille de la police. La valeur peut etre une 
taille absolue : une taille en points ou un des mots-cles xx-large, 
x— large, large, medium, small, x— small, xx— small. Pour 
un ecran, il est conseille un facteur d'echelle de 1,2 entre les 
valeurs consecutives de la table. Ainsi, si la valeur medium 
correspond a 12pt, la valeur large devrait correspondre a 
14.4pt. Les facteurs d'echelle peuvent varier selon les medias 
consideres. Par ailleurs, 1' agent utilisateur devrait prendre en 
compte la qualite et la disponibilite des polices au moment du 
calcul de cette table. Celle-ci peut aussi differer d'une famille de 
polices a une autre. La valeur peut egalement etre une valeur 
relative, grace aux mots-cles larger et smaller (ce qui 
correspond a un deplacement d'une case dans l'echelle 
precedente), ou en pourcentage, par rapport a la taille de la police 
de l'element parent. 
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font-family modifie le type de police utilise dans une page. 
Vous pouvez definir une fonte specifique, comme Arial ou 
Helvetica, ou vous contenter d'utiliser un nom generique, 
comme sans-serif ou serif. Vous pouvez definir des families 
de polices : le navigateur essaye alors chaque police a son tour et 
retient la premiere qu'il comprend. Ainsi, avec comme style 

font-family: Arial, Helvetica, sans-serif ; 

le navigateur essaye d'abord la police Arial (installee sur la 
plupart des PC), puis la police Helvetica (presente sur la plupart 
des Macintoshs) et ensuite seulement la famille generique Sans- 
serif, comprenant toutes les fontes dites non proportionnelles 
(contrairement a Arial et Helvetica, qui sont des polices 
proportionnelles). Parmi les autres families generiques, vous 
trouvez serif, cursive, fantasy et monospace. Les families 
de polices sont separees par des virgules, mais verifiez qu'il n'y 
ait pas de virgule avant le point-virgule final. 



REMAMUE 



Unites detaille 

Les elements peuvent avoir recours a huit unites differentes. 
Les unites relatives : 



em (taille de la fonte actuelle), ex (hauteur de la fonte actuelle). 
Les unites absolues : 

px (pixel), in (pouce), cm (centimetre), mm (millimetre), pt (point. Un 
point CSS2 mesure l/72 e de pouce, soit environ 0,35 mm) et pc (pica, 12 
points ou 4,15 mm). 

Les unites absolues devraient etre reservees aux cas pour lesquels vous 
connaissez les dimensions physiques du peripherique de sortie. 



II est souvent possible d'abreger des proprietes apparentees en les 
rassemblant dans une definition unique, ce qui est souvent nomme 
raccourci. C'est le cas pour la propriete font. Par exemple, pour 
specifier qu'un element doit se presenter dans une fonte Arial ou 
Sans-serif en gras italique de petite taille, vous definissez normalement 
comme suit les differentes proprietes : 

{font-style: italic ; font-weight: bold ; 

font-size: small ; font-family: Arial, sans-serif ; ) 

Vous pouvez cependant definir en une seule fois toutes les proprietes 
relatives aux polices. Vous devez pour cela definir toutes ces proprietes 
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selon un ordre particulier, en ne faisant apparaitre que leurs valeurs. 
L'ordre adequat est le suivant : 

font-style font-weight font-size font-family 

C'est ainsi que, dans l'exemple precedent, vous auriez pu utiliser : 

(font: italic bold small Arial, sans-serif) 

L'interet de cette technique tient a son gain de place, au prix d'une perte 
de lisibilite. Les proprietes individuelles sont separees par des espaces 
tandis que les valeurs multiples applicables a une propriete (comme les 
valeurs de font-family) sont separees par des virgules. 

Vous decouvrirez par la suite de nombreux autres exemples de notation 
raccourcie. 

Une autre propriete de police interessante, mais qui n'appartient pas a la 
notation raccourcie de la propriete font, est font-variant. Dans une 
police en petites capitales, les lettres minuscules presentent un aspect 
similaire aux lettres majuscules, avec toutefois une taille reduite et des 
proportions legerement differentes. Ce type de police porte le nom de 
police bicamerale (qui possede deux casses, comme les ecritures latines). 
Les valeurs possibles sont normal (une police non etiquetee comme 
etant en petites capitales) ou small-caps (qui specifie une police 
etiquetee comme etant en petites capitales). En 1' absence d'une telle 
police, les agents utilisateurs devraient en effectuer la simulation, par 
exemple en selectionnant une police normale et en remplacant les lettres 
minuscules par des majuscules mises a l'echelle. En dernier ressort, les 
lettres majuscules inchangees d'une police normale peuvent se 
substituer aux petites capitales : le texte apparait alors entierement en 
majuscules. 

Le tableau suivant dresse la liste des principales proprietes de texte et de 
police. 



Tableau 8.2 


: Principales proprietes de texte et de 
de style CSS 


police de feuille 


Propriete 


Valeur(s) 


But 


background 
—color 


couleur hexadecimale ou nom 


Couleur d'arriere- 
plan 


color 


couleur hexadecimale ou nom 


Couleur de texte 
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Tableau 8.2 


■ Principales proprietes de texte et de 
de style CSS 


police de feuille 


Propriete 


Valeur(s) 


But 


font 


font— style font— weight 
font— size font-family 


Proprietes de 
police 


font-style 


normal, italic, oblique 


Style de la police 


font— weight 


Increments de 100, normal, 
bold, bolder, lighter 


Graisse de la police 


font— size 


taille en points, xx-large, 
x— large, large, medium, 
small, x— small, xx— small, 
larger, smaller, pourcentage 


Taille de la police 


font— family 


tout nom de police, serif, 
sans-serif, cursive, 
fantasy, monospace 


Police(s) ou 
famille(s) de polices 
a employer 


text— align 


left, right, center, justify 


Alignement du texte 


text 
-decoration 


none, underline, overline, 
line— through, blink 


Enrichissement du 
texte 


text— indent 


longueur en points, longueur en 
pourcentage 


Indentation du texte 



Nous avions employe les proprietes text-align, font-size et 
font-weight dans plusieurs des specifications de notre feuille de style, 
ainsi que color et font-variant une fois chacune : 

/* style. ess : Feuille de style pour mon site */ 

HI {margin-left: 15%; margin-right: 15%; border-width: 1; 

border-style: solid; text-align: center; 

font-size: 32pt; color: blue} 
H2 {font-size: 20pt; text-align: center} 
P {font-size: 16pt; text-align: center} 
P. legal {font-size: 8pt; font-variant: small-caps} 
UL {font-size: 16 pt; text-align: center} 
LI {font-size: 14pt; text-align: left; margin-left: 4 0%} 
ADDRESS {text-align: center} 
TABLE {width: 100%; border-width: 2px; border-style: double; 

text-align: center} 
CAPTION {font-size: 24px; font-weight: bold; 

text-align: center;} 
TH {font-size: 20pt; border-width: lpx; 

border-style: solid; text-align: center} 
TD {font-size: 14pt; border-width: lpx; 

border-style: solid; text-align: center} 
TD. droit {font-size: 14pt; text-align: right} 
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Representation des elements a I'aide d'un 
style 

Vous connaissez deja les elements bloc et la facon dont ils se 
positionnent a l'ecran. A I'aide de tableaux, vous pouvez tricher quant a 
cette disposition, bien que cela soit un peu delicat et demande de 
multiples ajustements. Jusqu'a maintenant, un conflit fondamental 
existait en HTML entre une bonne compatibilite internavigateurs et la 
possibilite d'afficher des informations sous forme graphique. 

Les feuilles de style permettent d'etablir un compromis entre vos 
exigences de presentation et les souhaits de votre public. Vous pouvez 
definir les elements bloc au sein de la feuille de style dans des proprietes 
de boftes CSS et determiner quand et ou l'element sera affiche. 

Deux categories principales de proprietes doivent etre distinguees a ce 
stade : celles intrinseques a l'element, qui definissent ses caracteristiques 
internes, et celles relatives a la page ou au flux du code HTML. Ces 
dernieres definissent la position de l'element a l'ecran (ou le cas echeant 
sur le medium concerne). 

Proprietes intrinseques d'un element 

Tout element CSS se comporte comme une imbrication successive de 
quatre boites : 

La boite externe est l'aire de marges. Elle occupe le maximum de 
l'espace disponible (ou specifie). Ces marges transparentes, dont 
les dimensions sont gerees par la propriete margin, definissent 
l'espace transparent entre le bord de l'ecran (ou d'un autre 
element) et l'element actif. 

A l'interieur de l'aire de marges se trouve l'aire de bordures. 
Geree par la propriete border, elle represente les bordures 
affectees a l'element actif. 

Vient ensuite l'aire d'espacement : la surface entre le contenu et la 
limite interieure de la bordure. Elle est geree par la propriete 

padding. 

Enfin, la boite la plus interieure est la boite de contenu. Elle 
renferme le contenu de l'element actif. 
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Figure 8.16 : Boite CSS 

La propriete margin et ses proprietes apparentees definissent un espace 
transparent entre le bord de l'ecran (ou d'un autre element) et l'element 
courant. Vous pouvez definir la largeur (ou la hauteur) de chaque marge 
ou bien attribuer a toutes les marges une meme valeur. Par exemple, 

(margin: 10px} 

cree une marge de 10 pixels autour de l'element bloc. Vous pouvez 
specifier separement la taille de chaque marge en faisant suivre l'attribut 
d'un tiret puis de l'emplacement concerne : margin-top, 

margin— right, margin— bottom et margin— left. Ainsi, 

{margin-top: lpx ; margin-right: lOpx ; 
margin-bottom: lpx ; margin-left: lOpx ;) 

procure-t-il a l'element concerne des marges superieure et inferieure 
d'un pixel, mais des marges droite et gauche de 10 pixels. 

Vous pouvez specifier comme valeur pour cet attribut une valeur absolue 
(comme dans l'exemple), un pourcentage (par exemple, margin: 10% 
impose des marges de chaque cote de 10 % de l'espace disponible) ou 
choisir la valeur auto. 

Comme pour la propriete font, les proprietes de boite possedent 
egalement une forme raccourcie, plus simple mais moins lisible. Pour la 
propriete margin, les valeurs doivent etre placees dans l'ordre suivant : 

{margin: haut droit bas gauche] 
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Remarquez que seuls des espaces separent les valeurs individuelles. 
L'exemple precedent, avec une marge d'un pixel en haut et en bas et une 
marge de 10 pixels a droite et a gauche, pourrait ainsi etre ecrit : 

{margin: lpx lOpx lpx lOpx) 

Dans certains cas, des marges adjacentes peuvent fusionner. Selon la 
specification CSS 2.1, les marges horizontales ne fusionnent jamais, de 
meme que les marges verticales d' elements positionnes de facon 
absolue, flottants, en ligne (inline) ou avec un attribut overflow fixe 
a autre chose que visible, ainsi que les marges de l'element racine. 

Deux ou plus marges verticales adjacentes situees dans le flux normal 
peuvent fusionner. La largeur de la marge resultante est la largeur 
maximale de la largeur des marges concernees. Dans le cas de marges 
negatives, la valeur absolue maximale des marges negatives est deduite 
de la valeur maximale des marges positives, ou de zero en 1' absence de 
marge positive, 

Les bordures sont definies a l'aide de la propriete border et de ses 
proprietes apparentees : 

border-width definit la largeur de la bordure. Les largeurs 
peuvent etre definies avec les valeurs thin (mince), thick 
(epaisse), medium (moyenne) ou exprimees en points. Vous 
pouvez definir individuellement la largeur de la bordure de 
chaque cote a l'aide de border-top-width, border- 
right— width, border— bottom— width et border— left- 
width. L'ordre abrege de la propriete border-width est 
identique a celui de margin, soit : 

{border-width: haut droite bas gauche] 

border-style permet de definir un style de bordure. Cette 
propriete peut recevoir les valeurs none (aucune), dotted 
(pointilles), dashed (tirets), solid (pleine), double (grasse), 
groove (cadre grave), ridge (cadre en relief), inset (en 3D et 
en creux) et outset (en 3D et en relief). 

border-color est similaire a la propriete color d'un element. 
Elle s'emploie de la meme facon. 

La propriete border possede une forme raccourcie, qui permet 
d'appliquer les valeurs transmises a toutes les bordures d'un meme 
element. L'ordre a respecter est le suivant : 

{border: border-width border-style color;} 
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Vous pouvez egalement combiner les notations raccourcies pour ne 
specifier de valeur que pour la bordure du haut (ou celle de droite, du 
bas ou de gauche) a l'aide de la propriete border-top (ou right, 
bottom ou left) selon cet ordre : 

{border-top: border-top-width border-style color;} 

Enfin, la propriete padding utilise la meme syntaxe que la propriete 
margin, y compris la syntaxe raccourcie. C'est une propriete etablissant 
un espace vierge autour du contenu de 1' element, a l'interieur de la 
bordure. 

Les proprietes du contenu d'un element sont height et width. lis sont 
analogues aux attributs correspondants et determinent la hauteur et la 
largeur du contenu. Cela signifie que, pour obtenir la taille totale de 
1' element, vous devez ajouter successivement l'espacement, la bordure 
et la marge. Ces proprietes acceptent une valeur absolue ou en 
pourcentage, ainsi que la valeur auto. Le comportement de cette 
derniere valeur est quelque peu complexe et depasse la portee de ce 
livre. Reportez-vous a la section 10.3, Le calcul des largeurs et des 
marges, de la specification CSS2, a l'adresse www.yoyodesign.org/doc/w3c 
/css2/visudet.html#Computing_widths_and_margins Ces proprietes n'acceptent 
pas de valeurs negatives. 

La propriete overflow permet de definir ce qui doit se passer quand le 
contenu de 1' element excede 1' espace defini. Les valeurs acceptables 
sont visible (le contenu n'est pas tronque et peut etre represente hors 
de la boite du bloc), hidden (le contenu est tronque et aucun 
mecanisme de defilement n'est fourni pour voir la partie rognee. La 
taille et la forme du reliquat du rognage peuvent etre specifiees par la 
propriete clip), scroll (le contenu est tronque et l'agent utilisateur 
fournit si possible un mecanisme de defilement visible a l'ecran, tel 
qu'une barre de defilement. Ce dispositif apparait que le contenu de 
l'element soit tronque ou non) ou auto. 

Meme lorsque la valeur de la propriete overflow est visible, le 
contenu peut etre rogne par le systeme d' exploitation pour tenir dans la 
fenetre du document de l'agent utilisateur. 

Le tableau suivant resume ces proprietes, leurs valeurs et leurs effets. 
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Tableau 8.3 : Proprietes 


intrinseques d'un element 


Propriete 


Valeur 


Exemple 


Effet 


width 


longueur, 
pourcentage ou 

auto 


width: 
lOOpt 


Impose a I'element 
une largeur de cent 
points. Peut ainsi 
remplacer un 
tableau. 


height 


longueur ou auto 


height : 
20pt 


Impose a I'element 
une hauteur de vingt 
points 


margin 


longueur, 
pourcentage ou 

auto 


margin : 
lOpt 


Cree une marge de 
dix points autour de 
I'element 


border 
—width 


thin, medium, 
thick, longueur 


border 

—width : 
thin 


Cree une bordure 
mince en haut et en 
bas, et une bordure 






thick 

thin 

thick 


epaisse sur les 
cotes. 


border 
-style 


none, dotted, 
dashed, solid, 
double , groove, 
ridge, inset ou 
outset 


border 
-style : 
double 


Cree une bordure 
epaisse autour de 
I'element 


border 


border- width 
border-style 
border-color 


border : 

4pt 

double 

#000000 


Ajoute une marge 
double de quatre 
points autour du 
contenu 


padding 


longueur, 
pourcentage ou 

auto 


padding: 
lOpx 


Ajoute un 
espacement de dix 
pixels entre le 
contenu et la 
bordure 



Nous avions employe plusieurs de ces proprietes dans notre fichier 
style. ess : 

style. ess : Feuille de style pour mon site */ 
{margin-left: 15%; margin-right: 15%; 
border-width: 1; border-style: solid; 

text-align: center; font-size: 32pt; color: blue} 

{font-size: 20pt; text-align: center) 

font-size: 16pt; text-align: center} 
P. legal {font-size: 8pt; font-variant: small-caps} 
UL {font-size: 16 pt; text-align: center} 



/* 

HI 



H2 

P 
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LI {font-size: 14pt; text-align: left; margin-left: 40%} 

ADDRESS {text-align: center) 

TABLE {width: 100%; border-width: 2px; border-style: double; 

text-align: center) 
CAPTION {font-size: 24px; font-weight: bold; 

text-align: center;) 
TH {font-size: 20pt; border-width: lpx; border-style: solid; 

text-align: center) 
TD {font-size: 14pt; border-width: lpx; border-style: solid; 

text-align: center) 
TD. droit {font-size: 14pt; text-align: right) 



Incompatibihtes de navigateurs anciens 

REMARQUE „ . „ , , 

Les feuilles de style ne sont pas reconnues par tous les agents 
utilisateurs. Par exemple, Netscape, au moins jusqu'a sa version 4.06, 
recensait un certain nombre de problemes : 

La propriete padding des feuilles de style n'etait pas reconnue. II 
fallait employer a la place topPadding, rightPadding, 
bottomPadding ou lef tPadding. 

La propriete margins des feuilles de style n'etait pas reconnue. II 
fallait employer leftMargin, rightMargin OU bottomMargin. 
Les proprietes width, height et border appliquees aux images dans 
les feuilles de style n'etaient pas reconnues. 

Vous devez done etre conscient du fait que les utilisateurs disposant de 
navigateurs anciens peuvent ne pas voir votre site comme vous le 
souhaitez. 



Proprietes de positionnement d'un element 

Ces proprietes definissent l'emplacement d'apparition de l'element actif 
sur le medium considere. Elle sont desormais reconnues par la plupart 
des navigateurs (Internet Explorer depuis la version 3.0 et Netscape 
depuis sa version 4.0). 

Le meilleur moyen de les decouvrir consiste a prendre un exemple. 
Examinez le listing suivant : 

Listing 8-3 : position0.html 

<!D0CTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www. w3.org/TR/html4/ loose. dtd"> 
<HTML> 

<HEAD> 
<TITLE>"Positions CSS d'un Seacute; lément"</TITLE> 
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<META name="author" content="votre nom"> 

<META http-equiv="Content-Style-Type" content="text/css"> 
</HEAD> 

<BODY style="text-align : center"> 
<Hl>Démonstration des 

proprié té s de positionnement CSS 
</Hl> 
<!-- Flux normal --> 

<PXIMG src="Images/coucher de soleil.jpg" 
t ype=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Premier Seacute; lément <CODE>P</CODEXBR> 
Ceci est un paragraphe de texte normal. 
</P> 

<P> 
<IMG src="Images/coucher de soleil.jpg" 
type=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Deuxième é lément 
<CODE>P</CODEXBR> 
Ceci est un paragraphe de texte normal. 

</UL> 
</P> 
<P> 

<IMG src="Images/coucher de soleil.jpg" 
type=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Troisième Seacute; lément 
<CODE>P</CODEXBR> 

Ceci est un paragraphe de texte normal. 
</P> 
<P> 

<IMG src="Images/coucher de soleil.jpg" 
type=" image /gif " width="10 0px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Quatrième Seacute; lément 
<CODE>P</CODEXBR> 

Ceci est un paragraphe de texte normal. 
</P> 
</BODY> 
</HTML> 

Rien de bien excitant : la repetition de quatre paragraphes de texte, dans 
lesquels est inseree une image. En 1' absence de specification de position 
particuliere, les elements respectent le flux normal du code. En 
examinant ce fichier dans votre navigateur, vous observez quelque chose 
d' analogue a la figure suivante : un empilement des quatre paragraphes, 
centres en raison de l'attribut style="text-align: center" de 
1' element BODY. 
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Figure 8.17 : Flux HTML normal 

Modifions maintenant ce fichier, en ajoutant des attributs style aux 
trois derniers paragraphes, ainsi que quelques commentaires. Nous 
obtenons le listing suivant, dans lequel les modifications sont notees en 
gras : 

Listing 8-4 : position.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 

<HEAD> 
<TITLE>"Positions CSS d'un 
Seacute; lément"</TITLE> 
<META name="author" content="votre nom"> 

<META http-equiv="Content-Style-Type" content="text/css"> 
</HEAD> 
<B0DY style="text-align : center"> 
<Hl>DSeacute;monstration des 

proprié té s de positionnement CSS 
</Hl> 

<!-- Ce fichier utilise plusieurs elements 
similaires, dont seuls les attributs style different --> 
<!-- Flux normal --> 

<PXIMG src="Images/coucher de soleil.jpg" 
type= " image /gif " width="10 0px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Premier Seacute; lément <C0DE>P</C0DEXBR> 
Flux normal . <BR> 

Ceci est un paragraphe de texte normal. 
</P> 

<!-- Image flottante --> 
<P style="float: left"> 
<IMG src="Images/coucher de soleil.jpg" 
type=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Deuxième Seacute; lément 
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<CODE>P</ CODEXBR> 

Le paragraphe est placée dans un cadre 

f lottant Sagrave ; gauche . <BR> 

Ceci est un paragraphe de texte normal. 

</UL> 
</P> 

<!-- Position relative --> 

<P style="position: relative ; bottom: 10% left: 120px"> 
<IMG src="Images/coucher de soleil.jpg" 
t ype=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Troisième Seacute; lément 
<C0DE>P</C0DEXBR> 

Le paragraphe est dseacute;fini comme devant s'afficher 
en haut et Sagrave; droite de l'Seacute; 
lSeacute ;ment prSeacute ; cSeacute ;dent . <BR> 
Ceci est un paragraphe de texte normal. 
</P> 

<!-- Position absolue --> 

<P style="position: fixed ; top: lOpx ; left: 5px"> 
<IMG src="Images/coucher de soleil.jpg" 

type=" image /gif" width="100px" 

title="Un coucher de soleil sur le lac de Linciel"> 
Quatrième Seacute; lément 
<C0DE>P</C0DEXBR> 

Le paragraphe s'affiche de facon absolue par rapport 
a 1 ' Sagrave ; cran . <BR> 

Ceci est un paragraphe de texte normal. 
</P> 
</B0DY> 
</HTML> 

En examinant ce fichier dans votre navigateur, vous observez quelque 
chose d' analogue a la figure suivante : les quatre paragraphes sont 
desormais repartis a l'ecran dans un ordre different de celui de leur 
apparition dans le code. 
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Figure 8. 18 : 
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Analysons un peu ce qui se passe : 

Le premier paragraphe respecte le flux HTML normal. II est entre 
en dessous du titre, exactement comme dans la copie d'ecran 
precedente. 

Le second paragraphe est place dans une boite flottante 
positionnee a gauche : il est retire du flux normal. 

Le troisieme paragraphe se voit attribuer une position relative par 
rapport a l'element precedent : legerement plus haut et 
franchement plus a droite. 

En revanche, le quatrieme paragraphe se voit attribuer une 
position absolue par rapport a l'ecran : en haut et a gauche de 
celui-ci. 

Le dernier paragraphe est particulierement interessant. Pour vous en 
convaincre, reduisez la largeur de la fenetre de votre navigateur, et 
faites, si necessaire et possible, denier la fenetre : le quatrieme 
paragraphe se deplace en consequence et occupe toujours le meme 
emplacement a l'ecran ! 
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Figure 8.19 : 

Un element positionne 
de facon absolue 
occupe toujours la 
meme position a 
l'ecran 



Cet exemple devrait vous ouvrir un certain nombre de possibilites. Tout 
d'abord, plus besoin de tableaux, puisque vous pouvez definir 
l'emplacement d'un element en fonction de l'element precedent. 
Ensuite, un element defini en position absolue (par exemple en haut a 
gauche) peut constituer un magnifique logo, toujours affiche au meme 
emplacement, meme lorsque l'utilisateur fait denier une page... 

Remarquez toutefois que ces types de positionnement peuvent amener 
un « recouvrement » des differents elements, ce qui n'est guere 
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souhaitable. Heureusement, comme vous allez le voir, il existe des 
moyens de pallier ce probleme... 

Regardons de plus pres les differentes proprietes mises en oeuvre lors du 
positionnement d'elements. 

La propriete float specifie qu'une boite doit etre flottante a gauche, a 
droite ou pas du tout. Elle peut etre specifiee pour tout element, mais ne 
s' applique qu'aux elements qui ne sont pas positionnes de facon 
absolue. 

La propriete clear (non employee dans cet exemple) indique quels 
cotes d'une boite d'element ne peuvent pas etre adjacents a une boite 
flottante anterieure. Elle ne concerne pas les eventuels elements flottants 
a l'interieur de l'element concerne ou dans d'autres contextes de mise en 
forme. C'est un espacement au-dessus de la marge superieure d'un 
element, qui sert a « pousser » verticalement l'element au-dela de la 
boite flottante, generalement vers le bas. 

La propriete position determine si la position d'un element est 
absolute, relative ou static. Sa valeur par defaut est static, ce 
qui signifle que l'element apparait selon son chargement, en principe 
selon sa place dans le code source. Une position absolute signifle que 
la position de l'element est fixe par rapport au coin superieur gauche du 
medium (generalement l'ecran). Comme nous l'avons signale, un 
element dote de ce type de position peut recouvrir un autre element, 
puisqu'il est retire du flux normal. 

Si la propriete position possede comme valeur relative, l'element 
sera place en fonction de son parent ou de son voisin. Si l'element 
parent a recours a une position absolute, alors l'element relative 
apparaitra a la suite de celui-ci et pourra egalement recouvrir d'autres 
elements : il est lui aussi retire du flux normal. 

Les proprietes left et top defmissent l'endroit ou l'element doit etre 
place par rapport aux cotes de l'ecran (ou, dans le cas d'un element 
enfant, aux cotes de l'element parent). Les valeurs sont exprimees en 
points ou en pourcentage. 

Pour gerer les possibles recouvrements, servez-vous de la propriete 
z-index. Elle permet de controler l'element devant apparaitre au- 
dessus d'un autre en cas de recouvrement de positions absolues : un peu 
comme les couches d'un programme de dessin. 
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clip definit un rognage de l'element, tandis que visibility permet 
d'etablir si l'element est visible ou non. Un element visibility: 
hidden occupe son espace, mais n'est pas visible a l'ecran. 

Ces proprietes, leurs valeurs et leurs buts sont presentes dans le tableau 
suivant. 



Tableau 8.4 : Proprietes CSS de positionnement des elements 


Propriete 


Valeur 


Exemple 


Effet 


float 


left, right, none 


float: 


Place l'element dans un 




ou inherit 


left 


rectangle flottant sur la 
gauche 


position 


absolute, 


position: 


Place l'element a l'ecran 




relative, static 


absolute 


sans tenir compte des 
autres elements de la 
page 


top 


longueur ou 


top : 


Place l'element a dix 




pourcentage 


lOpt 


points du haut du 
document ou de 
l'element parent 


left 


longueur ou 


left: 


Place l'element a quinze 




pourcentage 


15pt 


point de la gauche du 
document ou de 
l'element parent 


clip 


shape 
(top-value, 


clip: 
rect (5 


Rogne cinq pixels du 
haut et du bas, et dix 




right— value, 


10 5 10) 


pixels sur les cotes. 




bottom-value , 








left-value) 






overflow 


visible, 


overflow: 


Attribue a l'element une 




hidden, auto, 


scroll 


barre de defilement, qu'il 




scroll 




en ait besoin ou non. 


z-index 


Entier 


z-index : 


Place d'abord le premier 






1 


element et empile 
dessus les suivants 


clear 


none, left, right, 


Clear: 


La boTte est decalee de 




both ou inherit 


left 


I'espace necessaire pour 
placer le bord de la 
bordure superieure en 
dessous du bord 
inferieur de toute bolte 
flottante due a un 
element anterieur dans 
le document source. 
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Une mise en oeuvre efficace de ces proprietes demande souvent pas mal 
de tatonnements. Le resultat est toutefois souvent a la hauteur des efforts 
engages... Souvenez-vous que nous avions dit que les feuilles de style 
representaient un aspect avance de HTML : vous en avez ici une preuve. 



8.6. Feuille de style en cascade 

Les langages de feuille de style en cascade, tel que CSS, autorisent 
1' assemblage des informations de style provenant de plusieurs sources. 
Pour defmir une cascade, l'auteur specifie une succession d'elements 
LINK et/ou STYLE. Les informations de style se repandent en cascade 
selon l'ordre d'apparition des elements dans la section HEAD. 



A 



Gare aux melanges. . . 

La specification HTML 4.01 ne precise pas la maniere dont cascadent 
les feuilles de style issues de differents langages de style. Mieux vaut 
eviter de melanger les langages de feuilles de style. 



La cascade peut inclure des feuilles de style qui concernent differents 
medias. Les elements LINK et STYLE peuvent tous deux etre utilises 
avec l'attribut media. L'agent utilisateur est alors responsable de 
1' elimination des feuilles de style qui ne s'appliquent pas au medium 
courant. 

Cette notion de « cascade » semble alors poser quelques problemes : 
comment l'agent utilisateur sait-il quelle feuille de style doit etre 
appliquee ? Pour le cas d'un medium de sortie, la chose est claire, mais 
nous avons vu qu'il pouvait exister plusieurs feuilles de style en cascade 
(une ou plusieurs feuilles externes, des elements STYLE et des attributs 
style). Cela nous amene a la notion d'heritage. 



Cascade et heritage 

Lorsqu'un agent utilisateur veut restituer un document, il doit identifier 
les valeurs des proprietes de style : la famille de police, le style de la 
police, la taille, la hauteur de ligne, la couleur du texte, etc. Le 
mecanisme exact depend du langage de feuille de style, mais la 
description qui suit est generalement applicable. 
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Le mecanisme de cascade est utilise quand un certain nombre de regies 
de style s'appliquent toutes directement a un element. II permet a 1' agent 
utilisateur de classer les regies selon leur specificite pour determiner 
celle qui est applicable. Si aucune regie n'est trouvee, l'etape suivante 
va dependre de la propriete de style : est-elle heritable ? Toutes ne le 
sont pas. Le langage de feuille de style fournit alors des valeurs par 
defaut, utilisees en 1' absence de regie explicite pour un element 
particulier. 

Si la propriete peut s'heriter, l'agent utilisateur examine l'element 
englobant immediat pour voir si une regie s'y applique. Ce processus 
continue jusqu'a 1' identification d'une regie applicable. Ce mecanisme 
autorise une specification compacte des feuilles de style. Par exemple, 
l'auteur peut specifier le type d'alignement du texte pour tous les 
elements de BODY par une seule regie appliquee a l'element BODY. C'est 
ce que nous avions fait dans les fichiers position0.html et position.html : 

<BODY style="text-align : center"> 

Fondamentalement, tout element inclus dans un autre herite du style de 
celui-ci, a moins que la feuille de style ne precise le contraire. Par 
exemple, la purpart des elements sont inclus dans l'element BODY. Si 
celui-ci est defini comme devant comporter du texte centre de couleur 
bleue, tous les elements de BODY possederont un texte bleu centre. 
Meme si un element particulier, comme H, est egalement defini dans la 
feuille de style, il herite des proprietes de BODY a moins que ses 
proprietes color et background ne soient explicitement specifiees 
dans la feuille de style. 

La theorie de l'heritage est done tres simple : vous partez de 
1' information la plus externe (la feuille de style externe) et progressez 
vers l'interieur. Un element inclus dans un autre element herite de ses 
proprietes sauf s'il dispose d'un style modinant tout ou partie de ces 
proprietes. Une feuille de style externe est surpassee par une feuille 
interne, elle-meme depassee par un style defini a l'interieur de l'element, 
lui-meme surpasse pour un element enfant par un style defini dans 
celui-ci. 

Voici l'ordre d'heritage, par priorite croissante : 

Proprietes definies par l'utilisateur pour l'element courant. 
Proprietes de feuille de style externe de l'element parent. 
Proprietes de feuille de style locale de l'element parent. 
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Styles de ligne de 1' element parent. 

Proprietes de feuille de style externe de 1' element courant. 
Proprietes de feuille de style locale de 1' element courant. 
Styles de ligne de 1' element courant. 

Vous voyez apparaitre dans cette liste un element « curieux » : la notion 
de feuille de style defmie par l'utilisateur. Vous l'avez probablement 
deja fait sans le savoir : il s'agit de la modification des proprietes de 
votre agent utilisateur, par exemple de votre navigateur. 

Prenons un exemple. Avec Firefox d'abord : 

1 Ouvrez Firefox, puis chargez le fichier index.html de votre site. 
Vous devez voir votre familiere page d'accueil. 
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Figure 8. BO : Page d'accueil de votre site 

2 Choisissez dans la barre de menu Affichage > Style de la page > 
Aucun style. Toute la mise en forme defmie dans la feuille de 
style disparait. 
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Figure 8.21 : 

Page d'accueil de votre site, sans 
feuille de style. 
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Choisissez a nouveau Affichage > Style de la page puis 
selectionnez Style de base de la page pour retrouver un affichage 
normal. 

Vous avez ici ordonne a 1' agent utilisateur d'ignorer toute feuille 
de style. Vous pouvez toutefois agir sur la page d'autres facons. 

3 Choisissez dans la barre de menu Affichage > Taille de texte > Plus 

grande. Tout le contenu texte de la page voit sa taille de police 
augmentee. 
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Figure 8.22 : 

Page d'accueil de votre site, 
avec augmentation de la 
taille des polices. 



L'effet est exactement identique a 1' application generale de la propriete 
font-size: larger. Vous pouvez augmenter a plusieurs reprises la 
taille des polices, ou inversement la diminuer. Apres avoir procede a 
quelques essais, choisissez Affichage > Taille de texte > Normale pour 
retrouver un affichage normal. 

Vous pouvez egalement agir sur la police par defaut, ainsi que sur la 
couleur de divers elements, en choisissant Outils > Options. Selectionnez 
General et choisissez Couleurs et police. 
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Figure 8.23 : 

Fenetre couleurs et polices de Firefox 
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D'autres parametres peuvent egalement etre modifies dans la section 
Avance des Options, comme le redimensionnement automatique des 
images trop grandes pour l'affichage dans la fenetre de navigation. 

Des modifications similaires sont possibles avec Internet Explorer (a 
partir de sa version 4) et celui-ci offre en outre la possibilite d'employer 
une feuille de style personnalisee. 

1 Ouvrez Internet Explorer, puis cliquez sur Outils > Options 
Internet. 

2 Dans l'onglet General, cliquez sur le bouton Accessibilite. 
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Figure 8.34 : 

Fenetre Accessibilite d'lnternet Explorer 

3 Cochez la case a cote de 1' option Mettre les documents en forme en 
utilisant ma feuille de style, puis saisissez dans la boite de dialogue 
le chemin d'acces et le nom de la feuille. 

4 Remarquez que, meme sans defmir de feuille de style personnelle, 
vous pouvez decider dans cette fenetre d'ignorer les specifications 
de couleur, de nom et de taille de polices des pages que vous 
affichez. 

































[3f i este: 1 

Arriere-plan : 
1^ Utiliser les couleurs Windows 




ppl Visites : ^M| 
Non visites : 1 1 

I - Selection par pointage 
Par pointage : 




























| OK Annuler 





















Figure 8.25 : 

Fenetre permettant de definir 
vos preferences, qui 
outrepassent les 
specifications de style des 
pages affichees. 

5 Cliquez sur OK pour sortir de l'option Accessibilite. Les autres 
boutons de la fenetre General permettent de specifier les couleurs, 
les polices et la langue. 
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Figure 8.26 : 

Autre fenetre. 
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Figure 8.27 : 

Encore une autre. 



Cliquez de nouveau sur OK pour enregistrer vos nouveaux 
reglages des Options Internet. 

L' ecran affiche alors les pages en melant les feuilles de style de 
l'utilisateur et celles du createur du site. 



8.7. Feuille de style auditive, 
pour un public particulier 

Comme nous l'avons signale, vous pouvez definir plusieurs feuilles de 
style, adaptees chacune aux caracteristiques du medium sur lequel le 
document doit etre restitue (par exemple : ecran graphique, ecran de 
television, appareil de poche, navigateur a synthese vocale, appareil 
tactile braille, etc.). 

Les feuilles de style disposent de plusieurs moyens pour presenter des 
informations a des utilisateurs parcourant le Web a l'aide de navigateurs 
non standard. Par exemple, certaines proprietes des feuilles de style 
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permettent de definir la pagination, en cas d'impression de la page. De 
facon similaire, le W3C a configure plusieurs proprietes concernant des 
peripheriques auditifs ou audio. 

Une feuille de style auditive peut etre utilisee par un malvoyant, avec 
des navigateurs mains fibres ou des peripheriques comparables texte- 
parole. Outre permettre la presentation du contenu normal d'une page 
Web, une feuille de style auditive autorise les concepteurs Web a avoir 
recours a des effets sonores particuliers, comme des precisions, des 
orateurs multiples ou des modifications d'intonation. 

Voici un exemple de feuille de style possedant des proprietes auditives : 

Listing 8-5 : styleaudit.css 

/* styleaudit.css : Feuille de style a proprietes auditives */ 
BODY {color: #000000 ; background: #FFFFFF; text-align: left} 
.direction {margin-left: 10%; font-family: monospace; 

font-style: italic; color: #000080; speak: none} 
SPAN. direction {margin-left: Opx; } 
.Capulet {speak: normal; voice-family: male} 
.Lady_capulet {speak: normal; voice-family: female; 

speech-rate: slow; richness: 40%; pitch: hight} 
.Montague {speak: normal; voice-family: male; richness: 80%; 

pitch: low} 
.Lady_montague {speak: normal; voice-family: female; 

speech-rate: slow} 
.off {font-variant: small-caps; speak: normal; 

voice-family: male; volume: 75%} 

Remarquez l'emploi de classes (.direction, par exemple) sans 
signalisation par un element : le style defini s' applique alors a toutes les 
instances de cette classe, quel que soit l'element concerne. Comme nous 
voulons supprimer l'indentation pour une indication de mise en scene en 
ligne, nous avons specifie une marge a pour l'element 
SPAN. direction. 

Cette feuille de style est liee au fichier suivant : 
Listing 8-6 : romen.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 

"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 
<HEAD> 

<TITLE>"Hamlet de Shakespeare"</TITLE> 
<META name="author" content="Fabrice Lemainque"> 
<META name="version" content="l . 8 . 1"> 
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<META http-equiv="Content-Style-Type" content="text/css"> 

<LINK rel="STYLESHEET" type="text/css" href="styleaudit . css"> 

</HEAD> 

<BODY> 

<H1 align="center">Extrait de Romé o et Juliette 

de Shakespeare</Hl> 
<HR> 
<DIV> 

<SPAN class="off">Capulet. - </SPAN> 
<SPAN class="Capulet">Quel est ce bruit ? ... 
Holà ! qu'on me donne ma grande 
épée.</SPANxBR> 
<SPAN class="off">Lady Capulet. - </SPAN> 
<SPAN class="Lady_capulet">Non, une bé quille ! 
une bé quille !.. Pourquoi demander une 
épée ?</SPANXBR> 
<SPAN class="off">Capulet. - </SPAN> 
<SPAN class="Capulet">Mon épé e dis-je ! 

le vieux Montague arrive et brandit sa rapiè re 
en me narguant !</SPANXBR> 
</DIV> 
<P class="direction">Entrent Montague, 1' épé e 

a la main, et Lady Montague. </P> 
<DIV> 

<SPAN class="off">Montague. - </SPAN> 
<SPAN class="Montague"> 

A toi, misé rable Capulet ! Ne me retenez pas ! 

Lâ chez-moi !</SPANXBR> 
<SPAN class="off">Lady Montague</SPAN> 
<SPAN class="direction"> 

, le retenant</SPAN> 
<SPAN class="off">. - </SPAN> 
<SPAN class="Lady_montague">Tu ne feras pas un seul pas vers 

ton ennemi .</SPAN> 
</DIV> 

<P class="direction">Entre le Prince Escalus, avec sa suite. 
</P> 
<HR> 

<CITE>Romé o et Juliette, Acte I Scà ne I. 
William Shakespeare, "Richard III, Romé o et Juliette, 
Hamlet", Trad. F-V Hugo. 1979, Ed. Garnier-Flammarion, 
ISBN 2-08-070006-5, page 154. 
</CITE> 
<HR> 
</B0DY> 
</HTML> 

Affiche dans un navigateur, celui-ci offre un aspect tout a fait normal. 

Avec un agent utilisateur texte-parole, les tirades sont prononcees a 
l'aide des voix adequates. Si toute la piece etait ainsi mise en forme 
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dans un fichier HTML, il serait possible a tous les acteurs de repeter a 
l'aide d'un ordinateur : il suffirait de desactiver la lecture des repliques 
qui le concerne dans la feuille de style. Les autres repliques seraient 
encore lues par 1' agent utilisateur. 



Ext nut de Romeo et Juliette de 
Shakespeare 
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Figure 8.28 : 

Aspect de I'extrait de 
Romeo et Juliette 



La propriete sonore la plus importante est speak. Pour desactiver 
totalement la lecture vocale d'un element, fixez sa valeur a none, 
comme nous l'avons fait pour les indications de mise en scene : 

.direction {margin-left: 10%; font-family: monospace; 
font-style: italic; color: #000080; speak: none} 

Cet element ne sera pas lu (parle), bien que cette propriete puisse etre 
ignoree par certains convertisseurs texte-parole. La valeur spell-out 
permet aux mots concernes d'etre epeles, la valeur normal 
correspondant a un rendu vocal normal. 

Dans de nombreux navigateurs texte-parole, les liens hypertextes sont 
lus comme du texte ordinaire. Pour donner un indice sonore particulier 
lorsque le navigateur atteint un lien hypertexte, servez-vous d'un signal 
sonore grace a la propriete cue. Par exemple : 

cue: url("pop.au") 

Vous pouvez placer l'indice avant ou apres, a l'aide des proprietes 

cue-before et cue-after. 

Vous pouvez aussi facilement ajouter une courte pause avant ou apres le 
signal. Utilisez ainsi 

pause: 2 0ms 

pour creer une pause de vingt millisecondes avant et apres l'element. 
Vous pouvez egalement avoir recours aux proprietes pause-before et 
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pause-after avec la meme syntaxe. La propriete pause dispose d'un 
raccourci : 

pause: pause-be fore-value pause-after-value 

Comme cela etait mentionne plus haut, une feuille de style auditive 
permet d'avoir recours a plusieurs orateurs. Les proprietes azimuth 
(direction), elevation (hauteur) et voice-family permettent 
d'ajouter des effets saisissants a votre page Web. Bien evidemment, ces 
proprietes peuvent etre ou non rendues correctement selon 1' agent 
utilisateur concerne, mais cette demarche ambitieuse est la premiere 
etape vers un format Web audio utilisable de facon universelle. 

Servez-vous de la propriete volume pour ajuster le niveau sonore rendu 
par le programme. Une valeur silent impose au programme d'attendre 
aussi longtemps qu'il l'aurait fallu pour lire le texte, mais sans que vous 
n'entendiez rien : c'est ce qu'il faudrait employer pour faire repeter 
l'acteur jouant Capulet, en modifiant comme suit son style : 

.Capulet {speak: normal; voice-family: male; volume: silent} 

Voici quelques autres moyens de modifier les proprietes de la voix : 
pitch rend la voix plus aigue ou plus grave, voice- family permet de 
choisir entre une voix d'homme, de femme ou d'enfant, ou bien 
d'utiliser une « police de voix » propre au navigateur. speech-rate 
accelere ou ralentit le debit vocal, tandis que richness et stress 
autorisent la modification de certains attributs de la voix elle-meme. 

Nous avons ici employe une unique feuille de style qui combinait 
presentations visuelle et sonore. II existe deux autres methodes pour 
mieux separer les proprietes en fonction du peripherique de sortie. 
N'oubliez pas que, chaque fois que vous repartissez des instructions en 
categories bien distinctes, vous facilitez d'autant la maintenance 
ulterieure. La premiere methode consiste a employer au sein d'un 
unique fichier la regie @ media : 

Listing 8-7 : styleaudit2.css 

/* styleaudit2 . ess : Feuille de style a proprietes visuelles 

et auditives */ 
@media screen ( 

BODY {color: #000000 ; background: #FFFFFF; text-align: left) 

.direction {margin-left: 10%; font-family: monospace; 
font-style: italic; color: #000080} 

SPAN. direction {margin-left: Opx; } 

.off {font-variant: small-caps} 

) 
Smedia speech ( 
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.direction {speak: none) 

.Capulet {speak: normal; voice-family: male) 

.Lady_capulet {speak: normal; voice-family: female; 

speech-rate: slow; richness: 40%; pitch: hight} 
.Montague {speak: normal; voice-family: male; 

richness: 80%; pitch: low) 
.Lady_montague {speak: normal; voice-family: female; 

speech-rate: slow) 

.off {speak: normal; voice-family: male; volume: 75%) 
) 

II aurait egalement ete possible de creer deux feuilles distinctes et de 
recourir a un attribut media lors de la liaison de ces feuilles au fichier 
concerne : 

Listing 8-8 : uisuel.css 

/* visuel.css : Feuille de style a proprietes uniquement 
visuelles */ 

BODY {color: #000000 ; background: #FFFFFF; text-align: left) 
.direction {margin-left: 10%; font-family: monospace; 

font-style: italic; color: #000080) 
SPAN. direction {margin-left: Opx; } 
.off {font-variant: small-caps) 

Listing 8-9 : audit. ess 

/* audit. ess : Feuille de style a proprietes purement 

auditives */ 

.direction {speak: none) 

.Capulet {speak: normal; voice-family: male) 

.Lady_capulet {speak: normal; voice-family: female; 

speech-rate: slow; richness: 40%; pitch: hight) 
.Montague {speak: normal; voice-family: male; 

richness: 80%; pitch: low) 
. Lady_montague {speak: normal; voice-family: female; 

speech-rate: slow) 
.off {speak: normal; voice-family: male; volume: 75%) 

Vous liez alors ces deux feuilles de style au fichier romeo.html a l'aide 
des deux elements LINK suivants, dotes d'un attribut media : 

<LINK rel="STYLESHEET" type="text/css" href="visuel . ess" 

media="screen"> 
<LINK rel="STYLESHEET" type="text/css" href ="audit . ess" 
media=" speech "> 

Nous avons examine ici le cas d'une presentation a la fois visuelle et 
auditive, mais vous pourriez faire de meme pour une presentation en vue 
d'une impression, ou pour distinguer une presentation sur ecran 
d'ordinateur d'une presentation a l'aide d'un video-projecteur. 
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Pourquoi des differences entre impression, ecran d'ordinateur 
et video-projection ? 

Un ecran d'ordinateur fonctionne par emission de lumiere : celle-ci 
provient soit de son tube cathodique, soit des cristaux liquides ou d'un 
dispositif similaire. De ce fait, des pages plutot claires avec un texte 
sombre sont generalement preferables. Ce fait est encore plus flagrant 
pour une impression, surtout en noir et blanc, pour laquelle il vaut mieux 
reduire les surfaces sombres imprimees (pour des raisons d'economies 
d'encre et de lisibilite). 

C'est exactement le contraire avec un video-projecteur ou un 
retroprojecteur, puisque les participants ne voient qu'une lumiere refiechie 
par 1' ecran : des pages foncees avec un texte clair sont generalement 
moins fatigantes et possedent un impact superieur. Inconvenient toutefois 
pour des transparents de retroprojection : vous consommez alors beaucoup 
plus d'encre... 
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Figure 8.29 : 

Une telle page est parfaite pour 
un affichage ecran ou une 
impression 




Figure 8.30 : 

En revanche, cette version est 
mieux adaptee a une 
video-projection. 
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En conclusion, les feuilles de style vous offrent un mecanisme d'une 
rare puissance pour adapter parfaitement le contenu de vos pages et 
documents Web au public vise. Leur etude complete depasse largement 
la portee de ce livre, puisque la specification CSS2 est aussi, sinon plus 
complexe que la specification HTML 4.01. 



8.8. Resume 

La plupart des attributs et elements relatifs a la mise en forme et 
a la presentation des pages Web sont desormais deconseilles en 
faveur du recours aux feuilles de style. 

La specification HTML 4.01 ne lie pas HTML a un langage de 
style particulier. Cela permet l'utilisation potentielle de plusieurs 
langages. Le langage le plus frequemment employe est CSS 
(Cascading Style Sheet), fonde sur la Recommandation W3C CSS 
2.1 (http://www.w3.org/TR/CSS21/cover.html#minitoc), dans l'attente 
de la diffusion finale de la version 3. 

Vous specifiez le langage de feuille de style a l'aide d'un element 

META. 

Vous pouvez inclure des styles dans une page Web de trois facons 
differentes : 

— a l'aide de l'attribut style, place dans pratiquement dans 
n'importe quel element ; 

— a l'aide d'un element STYLE place dans l'element HEAD, un 
element STYLE pouvant renfermer plusieurs definitions de 
style ; 

_ en creant une feuille de style externe, independante du 
document HTML. Vous liez ensuite cette feuille externe a 
votre document HTML a l'aide d'un element LINK. 

Vous pouvez definir le style de toutes les occurrences d'un 
element, d'une classe specifique ou d'un id specifique. Ces 
possibilites ne sont pas mutuellement exclusives. 

HTML permet aux auteurs de specifier les documents exploitant 
les caracteristiques du medium sur lequel le document doit etre 
restitue (par exemple : ecran graphique, ecran de television, 
appareil de poche, navigateur a synthese vocale, appareil tactile 
braille, etc.). Cela est effectue a l'aide de l'attribut media de 
l'element STYLE. 
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Le contenu de 1' element STYLE doit etre masque vis-a-vis des 
agents utilisateurs qui ne reconnaissent pas les feuilles de style. 

Une feuille de style est un simple fichier texte qui indique a 
1' agent utilisateur comment restituer votre code HTML. Les 
feuilles de style externes emmenent HTML un pas plus avant dans 
la separation reussie des logiques de travail et de presentation. Un 
nom de fichier de feuille de style se termine par une extension 
.ess. 

Une feuille de style externe peut etre definie comme persistante, 
preferee ou alternative. 

Outre les proprietes de modification des caracteristiques du texte 
et des polices, CSS propose des proprietes de positionnement. 
Celles-ci permettent de s'affranchir en partie ou en totalite du flux 
normal du code HTML. 

Tout element CSS se comporte comme une boite dotee de 
proprietes soit intrinseques, soit relatives a un ou plusieurs autres 
elements ou au document. 

Les langages de feuille de style en cascade, tel que CSS, 
autorisent 1' assemblage des informations de style provenant de 
plusieurs sources. Pour definir une cascade, l'auteur specifie une 
succession d'elements LINK et/ou STYLE. Les informations de 
style se repandent en cascade selon l'ordre d'apparition des 
elements dans la section HEAD. 

Un element inclus dans un autre element herite de ses proprietes 
sauf s'il dispose d'un style modifiant tout ou partie de ces 
proprietes. Une feuille de style externe est surpassee par une 
feuille interne, elle-meme depassee par un style defini a l'interieur 
de l'element, lui-meme surpasse pour un element enfant par un 
style defini dans celui-ci. 

II est possible de parametrer un agent utilisateur afin qu'il ignore 
tout ou partie des feuilles de style prevues par l'auteur, et meme 
parfois d'appliquer sa propre feuille de style utilisateur. 

Une feuille de style a proprietes auditives est un exemple de 
feuille de style adaptee aux caracteristiques du medium sur lequel 
le document doit etre restitue. 
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Un formulaire constitue un moyen d'apporter un peu d'interactivite a 
une page HTML. II peut permettre de selectionner une langue, une 
feuille de style particuliere, de personnaliser l'affichage (comme pour un 
« Bienvenue votre_nom ») et bien d'autres choses encore. 

Des le prochain chapitre, quand vous en apprendrez plus sur les scripts, 
les formulaires deviendront tres importants. La plupart des scripts ont 
recours a des formulaires pour ajouter du dynamisme a un site. Un script 
peut valider le contenu d'un formulaire avant de le soumettre a un autre 
script, ou meme traiter la totalite du contenu sans recourir aux 
ressources du serveur. Certains de ces scripts peuvent enregistrer des 
informations dans un ou plusieurs cookies qui sont enregistres sur 
l'ordinateur de l'utilisateur, et non sur le serveur Web. Grace aux scripts 
et aux formulaires, vous pouvez creer de puissantes applications qui 
reduisent le poids impose aux ressources de votre serveur. 

Un formulaire HTML est une partie du document constitute d'un 
contenu normal, d'un balisage, mais surtout d'elements speciaux 
etiquetes appeles commandes (cases a cocher, boutons d'option, menus, 
etc.). L'utilisateur « remplit » generalement le formulaire en modifiant 
ses commandes (en saisissant un texte, en selectionnant les articles d'un 
menu, etc.), avant de le soumettre a un agent pour traitement (par 
exemple, a un serveur Web, a un serveur de messagerie, etc.). 

Ce chapitre presente les principaux constituants des formulaires Web, 
ainsi que la facon de les concevoir. Le Chapitre 10, consacre aux scripts, 
traitera plus en detail de l'emploi de scripts pour traiter les informations 
d'un formulaire. 

Elements et attributs etudies : 

FORM, action, method, name, id, enctype, accept-charset, 

accept 
LABEL, for 
INPUT, type, checked, maxlength, notab, size, src, 

tabindex, value 
ISINDEX 

BUTTON, name, value, type 
SELECT, name, size, multiple, OPTION, label, value, 

selected, OPTGROUP, label 
TEXTAREA, name, rows, cols 
LABEL, value, for 
FIELSET, LEGEND, align 

tabindex, accesskey, disabled, readonly 
OBJECT 
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9.1. Constituants d'un formulaire 



Element FORM 



Voici un extrait de fichier qui cree un formulaire simple. Celui-ci 
comprend des etiquettes ou liberies (labels), des boutons d' option et des 
boutons de commande (pour reinitialiser le formulaire ou le soumettre) : 

<FORM action="http : //unsite . com/prog/ajoutermembre" 
method="post"> 
<P> 

<LABEL for="prenom">Prénom : </LABEL> 
<INPUT type="text" id="prenom"XBR> 
<LABEL for="nom">Nom : </LABEL> 
<INPUT type="text" id="nom"XBR> 

for="email">e-mail : </LABEL> 
type="text" id="email"><BR> 

type="radio" name="genre" value="homme"> Homme<BR> 
<INPUT type="radio" name="genre" value="femme"> Femme<BR> 
<INPUT type="submit" value="Envoyer"> <INPUT type="reset"> 
</P> 
</FORM> 



<LABEL 
<INPUT 
<INPUT 



Affiche dans un navigateur, cet extrait de fichier affiche 1' aspect presente 
dans la figure suivante. 
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Figure 9. 1 : 

Exemple de formulaire 



II est vrai que l'aspect n'est pas parfait, mais vous savez comment 
l'ameliorer si vous le voulez... 

Vous creez un formulaire dans une page HTML a l'aide de l'element 
FORM. Ses balises d'ouverture et de fermeture sont obligatoires. 
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L'element FORM agit comme conteneur general du formulaire, 
notamment pour les commandes. II specifie : 

La disposition du formulaire (definie par le contenu de l'element). 

Le programme qui va manipuler le formulaire rempli puis soumis. 
Le programme recepteur doit etre capable d' analyser les couples 
nom/valeur arm de les utiliser. 

La methode selon laquelle les donnees de l'utilisateur seront 
envoyees au serveur. 

L'encodage de caracteres qui doit etre accepte par le serveur pour 
manipuler ce formulaire. Les agents utilisateurs peuvent avertir 
l'utilisateur de l'encodage accepte et/ou empecher que celui-ci 
n'entre des caracteres non reconnus. 

Un formulaire peut contenir un texte et un balisage (paragraphes, listes, 
etc.) en plus de commandes. II accomplit tout ceci a l'aide de plusieurs 
attributs fondamentaux : 

L'attribut action specifie 1' agent charge du traitement du 
formulaire. Le comportement de 1' agent utilisateur pour une 
valeur autre qu'un URI http est indefmi. 

L'attribut method specifie la methode HTTP qui sera employee 
pour soumettre le jeu des donnees de formulaire. Les valeurs 
possibles (insensibles a la casse) sont get (la valeur par defaut) et 
post. Nous reviendrons plus loin sur la signification de ces deux 
methodes. 

L'attribut name nomme l'element pour qu'il puisse etre appele 
par une feuille de style ou un script. Cet attribut est desormais 
deconseille : mieux vaut employer l'attribut id pour identifier les 
elements. 

L'attribut en c type specifie le type de contenu defini pour la 
soumission du formulaire au serveur (lorsque la valeur de method 
est post). La valeur par defaut de cet attribut est 

application/x-www-f orm-urlencoded. La valeur multipart/ 
form-data doit etre employee avec l'element INPUT lorsque 
celui-ci est defini comme type="f ile". 

L'attribut accept-charset specifie la liste des encodages de 
caracteres des donnees saisies qui sont acceptes par le serveur 
traitant ce formulaire. La valeur est une liste de valeurs de jeu de 
caracteres, separees par des espaces et/ou des virgules. Le client 
doit interpreter cette liste comme une liste de type « OU 
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exclusif ». La valeur par defaut de cet attribut est la chaine 
reservee UNKNOWN. Les agents utilisateurs peuvent interpreter 
cette valeur comme representant l'encodage de caracteres 
employe pour transmettre le document contenant l'element FORM 
en question. 

Enfin, l'attribut accept specifle la liste de types de contenu, 
separes par des virgules, que le serveur qui traite ce formulaire 
prend correctement en charge. L' agent utilisateur peut utiliser ces 
informations pour eliminer les fichiers non conformes quand il 
demande a l'utilisateur de selectionner un fichier a envoyer au 
serveur. 

Types de commandes de formulaire 

Les utilisateurs interagissent avec les formulaires au moyen de 
commandes nominees. Le « nom de commande » d'une commande est 
specifie par son attribut name. La portee de l'attribut name d'une 
commande au sein d'un element FORM est cet element FORM. 

Chaque commande possede a la fois une valeur initiale et une valeur 
courante, toutes deux des chaines de caracteres. La valeur initiale d'une 
commande peut generalement etre specifiee a l'aide de l'attribut value 
de l'element de commande. 

La valeur courante d'une commande est d'abord egale a la valeur initiale. 
Elle peut etre modifiee par la suite par les actions de l'utilisateur et par 
les scripts. 

La valeur initiale d'une commande ne change pas. Lorsqu'un formulaire 
est reinitialise, la valeur courante de chaque commande redevient sa 
valeur initiale. Si la commande est depourvue de valeur initiale, l'effet 
de la reinitialisation du formulaire sur cette commande est indefini. 

Lors de la soumission du formulaire pour son traitement, le nom et la 
valeur courante de certaines commandes sont accouples. Ces couples 
sont soumis avec le formulaire. 

HTML definit plusieurs grands types de commandes : 

Boutons d'action. Comme l'indique leur nom, les boutons 
d' action ont pour but de declencher une action. Celle-ci peut etre 
definie, comme pour un bouton de soumission (qui soumet le 
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formulaire) ou de reinitialisation (qui redonne leur valeur initiale 
a toutes les commandes), ou definie par l'utilisateur. Un 
formulaire peut contenir plusieurs boutons de soumission. Un 
bouton d'action defini par l'utilisateur ne possede pas de 
comportement par defaut. Chaque bouton poussoir peut avoir des 
scripts cote client qui sont associes aux attributs d'evenement de 
1' element. Quand un evenement se produit (par exemple, 
l'utilisateur presse le bouton, le relache, etc.), le script associe est 
declenche. Le langage du script du bouton doit etre defini a l'aide 
d'une declaration de script par defaut (avec l'element META). Un 
bouton est cree a l'aide d'un element BUTTON ou INPUT. 

Cases a cocher. Les cases a cocher sont des interrupteurs 
marche/arret qui peuvent etre actionnes par l'utilisateur. 
L'interrupteur est sur « marche » lorsque l'attribut checked de 
l'element de commande est specifie. Lors de la soumission du 
formulaire, seules les commandes de cases a cocher activees 
peuvent devenir des commandes reussies. Des cases a cocher 
peuvent etre regroupees au sein d'un formulaire sous un meme 
nom de commande. Elles permettent ainsi aux utilisateurs de 
selectionner plusieurs valeurs pour la meme propriete. Vous creez 
une case a cocher a l'aide de l'element INPUT. 

Boutons d'option. Parfois egalement appeles boutons radio, les 
boutons d'option sont analogues aux cases a cocher. lis en 
different toutefois en ce que, lorsqu'ils sont regroupes sous un 
meme nom de commande, ils sont mutuellement exclusifs : 
lorsqu'un bouton est mis sur « marche », tous les autres boutons 
du groupe sont automatiquement mis sur « arret ». Vous creez un 
bouton radio a l'aide de l'element INPUT. En raison des 
differences d' interpretation entre les agents utilisateurs, veillez a 
ce que l'un des boutons d'option d'un groupe soit mis 
initialement sur « marche ». 

Menus. Les menus proposent des options aux utilisateurs, parmi 
lesquelles il faut faire un choix. Vous creez un menu a l'aide de 
l'element SELECT combine avec des elements OPTGROUP et 
OPTION. 

Saisie de texte. Deux types de commande permettent aux 
utilisateurs la saisie d'un texte. L'element INPUT cree une 
commande pour une saisie sur une seule ligne, l'element 
TEXTAREA, pour une saisie sur plusieurs lignes. Dans les deux 
cas, le texte saisi devient la valeur courante de la commande. 
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Selection d'un fichier. Ce type de commande permet a 
l'utilisateur de selectionner un fichier de sorte que son contenu 
puisse etre soumis avec le formulaire. Une commande de 
selection de fichier est creee a l'aide de l'element INPUT. 

Commandes cachees. II est possible de creer des commandes qui 
ne sont pas restituees mais dont les valeurs sont soumises avec le 
formulaire. Cela sert generalement a enregistrer les informations 
entre les echanges client/serveur, qui seraient autrement perdues 
du fait de la nature « sans etat » du protocole HTTP (voir le 
document [RFC2616]). Une commande cachee est creee a l'aide 
de l'element input. 

Commandes d'objets. II est possible d'inserer des objets 
generiques dans les formulaires, de facon que les valeurs qui leur 
sont associees soient soumises en meme temps que les autres 
commandes. L'element OBJECT permet de creer une commande 
d'objet. 

Les elements utilises pour creer les commandes apparaissent 
generalement dans un element FORM. lis peuvent toutefois apparaitre en 
dehors de la declaration de l'element FORM lorsqu'ils servent a creer une 
interface utilisateur. 



Element INPUT 

Vous avez du remarquer que l'element INPUT est de loin l'element le 
plus employe dans un formulaire. II permet en effet de creer des boutons 
d'action, des cases a cocher, des boutons d'option, la saisie d'un texte 
d'une ligne, la selection d'un fichier et de creer une commande cachee. 

Cet element, depourvu de balise de fermeture, possede la syntaxe 
generale suivante : 

<INPUT type=va2eur naiue^raleur value=valeur size=valeur> 

L'attribut type est l'attribut le plus important : il specifie le type de 
commande a creer. Cet attribut peut posseder de nombreuses valeurs 
legales, qui conditionnent la presence ou 1' absence d' autres attributs. 

La valeur par defaut de cet attribut est text. Cela cree une commande 
de saisie de texte sur une seule ligne. L'attribut complementaire size 
indique a 1' agent utilisateur la largeur initiale de la commande, exprimee 
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en nombre entier de caracteres. L'attribut complementaire maxlength 
specifie le nombre maximum de caracteres que l'utilisateur peut saisir. 
Par exemple, 

Norn de l'utilisateur : <INPUT type=text name="nomutilisateur" 
value="" size="10" maxlength="25"> 

cree un champ de 10 caracteres de largeur, qui peut accepter jusqu' a 25 
caracteres en tout. 
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Figure 9.2 : 

Exemple d'element INPUT de type text 

Lorsqu'il sera soumis, le nom du champ sera nomutilisateur et la valeur 
(value) sera ce qui a ete saisi dans le champ. 

La valeur password cree une commande de saisie de texte sur une 
seule ligne, de type mot de passe : le texte saisi est restitue de maniere a 
dissimuler les caracteres (par exemple, une succession d'asterisques). La 
valeur courante est le texte saisi par l'utilisateur, non le texte restitue par 
1' agent utilisateur. Vous employez en ce cas les attributs 
complementaires size et maxlength comme avec la valeur text. 

Mot de passe : <INPUT type="password" name="motdepasse" 
size="10" maxlenght="15"> 

Cet exemple cree un champ de 10 caracteres de largeur, qui peut 
accepter jusqu' a un maximum de 15 caracteres en tout. Lors de la saisie, 
les caracteres sont remplaces a l'ecran par des asterisques. 
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Figure 9.3 : 

Exemple d'element INPUT de type password 
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Comme pour la valeur text, lors de la soumission, le nom du champ 
sera motdepasse et la valeur (value) ce qui a ete saisi dans le champ. 



remsroue 



Mot de passe 

La protection offerte par ce dispositif reste toute relative. Bien qu'il 
soit masque par l'agent utilisateur aux yeux d'un eventuel observateur, le 
mot de passe est transmis au serveur en texte clair et peut etre lu par 
quiconque possede un acces au reseau. 



La valeur checkbox cree une case a cocher, tandis que la valeur radio 
cree un bouton d'option. L'attribut complementaire value, qui specifie 
la valeur initiale de la commande, est alors obligatoire. L'attribut 
booleen checked specifie que le bouton (ou la case) est sur « marche ». 
En voici un exemple : 



<P>Sexe :<BR> 

<INPUT type="radio" name="sexe 

<INPUT type="radio" name="sexe 

</P> 

<P>Maté riel possé dé 



value="homme" checked> Homme 
value="femme"> Femme 

:<BR> 



<INPUT type="checkbox" name="matos" value="LCD" checked> 

Ecran plat 
<INPUT type="checkbox" name="matos" value="DVD"> 

Graveur de DVD 
<INPUT type="checkbox" name="matos" value="CD"> 

Graveur de CD 
<INPUT type="checkbox" name="matos" value="multi"> 

Imprimante multifonction 
</P> 
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Exemple lie 

formulaire 



INPUT type=" checkbox" et 

INPUT type=" radio" : 

t-itsfs li cocher et boutons d' options 

Sera: 
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Figure 9.4 : 

Exemple d'elements INPUT de type 
checkbox et radio 



Remarquez dans cette figure que le bouton Homme est coche, tout 
comme les cases Ecran plat et Graveur de DVD. 
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Si chaque bouton d'option necessite un element separe, vous les 
rassemblez dans un meme groupe a l'aide d'un meme name, ici 
« sexe ». Des boutons d'option appartenant au meme groupe sont 
mutuellement exclusifs : un clic sur l'un d'entre eux desactive les autres. 
Vous pouvez posseder plusieurs groupes de boutons d'option, chaque 
groupe de boutons possedant un name unique. Chaque bouton possede 
toutefois une value differente, ici « homme » et « femme ». Homme et 
femme etant des valeurs mutuellement exclusives, ils constituent de 
bons candidats pour des boutons d'option. 

En revanche, les cases a cocher laissent l'utilisateur libre de selectionner 
plus d'une option dans un groupe. Les champs de cases a cocher d'un 
meme groupe possedent le meme nom, des valeurs differentes, mais ne 
s'excluent pas mutuellement. Dans cet exemple, l'utilisateur peut 
posseder zero ou plusieurs des materiels cites : des cases a cocher 
constituent done un excellent choix. 

Les valeurs submit et reset creent respectivement un bouton de 
soumission et un bouton de reinitialisation. Voici un exemple de mise en 
ceuvre : 

<INPUT type="submit" value="Envoyer ! "> 
<INPUT type="reset" value="Annuler"> 
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Exemple de 
form ul aire 




INPl 
b 


T type=" submit" et I! 
type=" reset" : 

nlllOITS lit' MHimisNIOn L'l ».\ 

reinitialisation 

CrMiyer 1 | ^nuler | 


1PUT 



Figure 9.5 : 

Exemple d'elements INPUT de type 
submit et reset 



Ces boutons possedent des significations preetablies : vous n'avez pas a 
leur lier de script. Le bouton de soumission effectue 1' action dennie dans 
1' element FORM, tandis que le bouton de reinitialisation redonne a tous 
les elements du formulaire leur valeur initiale. Exceptionnellement, 
l'attribut name est normalement superflu pour ces deux boutons : la 
valeur qui apparait sur le bouton lui-meme n'est pas envoyee avec le 
reste des donnees du formulaire. Elle ne possede pas de nom et est par 
consequent sans interet. 
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Si vous specifiez toutefois un nom pour votre bouton Envoyer, le nom et 
la valeur ( name et value) de ce bouton seront envoyes. Cette 
caracteristique peut se reveler tres utile en combinaison avec l'emploi de 
langages de script lors du traitement de votre formulaire. 

La valeur image cree un bouton de soumission graphique. La valeur de 
l'attribut complementaire src specifie alors l'URI de l'image qui va 
decorer le bouton. Pour des questions d'accessibilite, mieux vaut 
toujours fournir un texte de remplacement pour l'image, a l'aide de 
l'attribut alt. L'attribut complementaire obligatoire src specifie la 
localisation de l'image a utiliser pour decorer le bouton de soumission 
graphique. 

Lorsque vous cliquez sur l'image a l'aide d'un dispositif de pointage, le 
formulaire est soumis et les coordonnees du clic sont transmises au 
serveur. La coordonnee « x » se mesure en pixels a partir de la gauche 
de l'image et la coordonnee « y » en pixels a partir du haut de l'image. 
Les donnees soumises comprennent les valeurs nom.x=valeur-de-x et 
nom.y=valeur-de-y, dans lesquelles nom est la valeur de l'attribut 
name, et valeur-de-x et valeur-de-y respectivement les valeurs 
des coordonnees « x » et « y ». 

Remarquez que, si le serveur doit entreprendre des actions differentes 
selon l'endroit clique, l'utilisateur d'un navigateur non graphique sera 
desavantage. Mieux vaut done recourir aux approches alternatives 
suivantes : 

Employer plusieurs boutons de soumission (chacun avec sa 
propre image) au lieu d'un seul bouton de soumission graphique. 
Les feuilles de style permettent de controler le positionnement de 
ces boutons. 

Employer une image cliquable cote client en combinaison avec 
des scripts. 

Voici un exemple : 

<INPUT type="image" src="images/boutonenvoyer . gif " 
alt="Envoyer ! "> 

II est cree un bouton de type image, qui emploie le fichier image 
boutonenvoyer.gif (situe comme il se doit dans le dossier images du site) 
et dont le texte alternatif est « Envoyer ! ». 
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Exemple de 
formulaire 




INPUT type=" image" : image 




CJnvoyer ! 




U^ 




- 



Figure 9.B : 

Exemple d'element INPUT de type 
image 

La valeur button cree un bouton d' action. L'intitule du bouton est la 
valeur de l'attribut value. 

<INPUT type="button" name="fond" 

value="Changer la couleur de fond"> 
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Exemple de 
formulaire 



INPUT type=" button" : bouton 
d'action 



Changer ia cculeur de fond 



Figure 9. 7 ; 

Exemple d'element INPUT de type 
button 



La valeur hidden cree une commande cachee. 

<INPUT type="hidden" name="sourceform" value="feedback. html"> 

Nous ne montrons pas de copie d'ecran, puisque par definition cette 
commande n'y apparait pas ! 

Cela permet par exemple de savoir quel formulaire l'utilisateur a rempli, 
ou de soumettre l'heure, la date, les donnees de l'utilisateur, ou des 
donnees similaires en plus du reste des donnees du formulaire. 

Enfin, la valeur file cree une commande de selection de fichiers. Le 
nom du fichier initial est en principe la valeur de l'attribut value. 

<B>Fichier sagrave; envoyer :</B> 

<INPUT type="file" name="envoyer" size=10> 
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Exemple de 
formulaire 




INP 


UT type=" file" : envoi de 
fichier 


Fichier a envoyer : \ Parcourir.. 1 



Figure 9.8 : 

Exemple d element INPUT de 
type file 

Remarquez dans la figure precedente qu'un bouton Parcourir est 
automatiquement ajoute a cote du champ de saisie du nom de fichier : 
vous pouvez cliquer dessus pour parcourir votre systeme de fichiers et 
selectionner le fichier concerne. 

En specifiant dans l'element FORM l'attribut enctype et en lui attribuant 
la valeur multipart/ form-data, chaque contenu de fichier sera 
conditionne pour soumission dans une section distincte d'un document 
en plusieurs parties. 

Les autres attributs de l'element INPUT sont presentes dans le tableau 
suivant. 
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Nous reviendrons dans la suite de ce chapitre sur les attributs tab index 

et notab. 



REMSROUE 



Element ISINDEX 

L'element ISINDEX n'est pas un element de formulaire, puisqu'il 
n'appartient pas a un element FORM. Son emploi est fortement 
deconseille. Cet element cree une commande de saisie d'un texte sur une 
seule ligne, qui admet un nombre quelconque de caracteres. Les agents 
utilisateurs peuvent utiliser la valeur de l'attribut prompt de cet element 
comme titre pour l'invite. Mieux vaut employer INPUT pour creer des 
commandes de saisie de texte. 

Ainsi, la declaration is index suivante : 

<ISINDEX prompt="Saisissez le mot Sagrave; rechercher : "> 

pourrait se reecrire comme suit avec l'element INPUT : 

<FORM action=" . . . " method="post"> 



<P>Saisissez le mot Sagrave; rechercher 

</P> 

</FORM> 



<INPUT type="text"> 



Element BUTTON 

Les boutons crees par l'element BUTTON fonctionnent exactement 
comme ceux crees avec l'element INPUT, mais offrent des possibilites 
de restitution plus variees, puisque l'element BUTTON peut posseder un 



350 LE GUIDE COMPLET 



Constituants d'un formulaire 



contenu. Par exemple, un element BUTTON qui contient une image 
fonctionne de la meme facon et peut avoir le meme aspect qu'un 
element INPUT dont l'attribut type possede la valeur image, mais 
admet en outre un contenu. 

Cet element doit imperativement posseder une balise ouvrante et une 
balise de fermeture. 

Les agents utilisateurs visuels peuvent restituer les boutons BUTTON en 
relief et avec un mouvement de haut en bas quand on les clique, les 
boutons INPUT etant restitues comme des images plates (reportez-vous 
a la figure de la page 378). 

Ses principaux attributs sont les suivants : 

name specifie le nom de la commande. 

value definit la valeur initiale du bouton. 

type declare le type du bouton. Les valeurs possibles sont la 
valeur par defaut submit (bouton de soumission), reset (bouton 
de reinitialisation) et button (bouton d'action). 

L'exemple suivant reprend et prolonge un exemple precedent en creant 
des boutons de soumission et de reinitialisation avec l'element BUTTON 
au lieu de INPUT. Les boutons contiennent des images par 
l'intermediaire d' elements IMG. 

<FORM action="http: //unsite . f r/prog/ajoutermembre" 
method="post"> 

<P> 

Prénom : <INPUT type="text" name="prenom"XBR> 

Nom : <INPUT type="text" name="nom"XBR> 

E-mail: <INPUT type="text" name="email"XBR> 

<INPUT type="radio" name="genre" value="homme"> Homme<BR> 

<INPUT type="radio" name="genre" value="femme"> Femme<BR> 

<BUTTON name="submit" value="envoyer" type="submit"> 
<IMG src="images/c_bon . gif " alt="C'est tout bon ! "> 

</BUTTON> 

<BUTTON name="reset" type="reset"> 

<IMG src="images/c_pas_bon.gif " alt="Surtout pas ! "> 

</BUTTON> 

</P> 
</FORM> 

Le resultat est presente dans la figure suivante. Pensez a toujours fournir 
un texte de remplacement pour l'element IMG. 
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Exemple de 
formulaire 




BUT 


TON : element bouton d'action 




Prenom : \~ 






Nom:| 






E-mail: |~~ 

<~ Homme 
<~ Femme 

sl!9soumettre | KyEffacer | 








■1 



Figure 9.9 : 

Exemple d'element BUTTON 



REMARQUE 



IMG et BUTTON 



II est illegal d'associer une image cliquable a un element IMG 
apparaissant en contenu d'un element BUTTON. L'exemple suivant est 
interdit : 

<BUTTON> 

<IMG src="foo. gif " usemap=" . . . "> 

</BUTTON> 



Elements SELECT, OPTGROUP et OPTION 
Element SELECT 

Vous creez un menu a l'aide d'un element SELECT. Cet element possede 
obligatoirement une balise d'ouverture et une balise de fermeture. 
Chaque option du menu est representee par un element OPTION. Un 
element SELECT doit contenir au moins un element OPTION. Voici un 
exemple. 

<P>Choisissez votre navigateur : 
<SELECT NAME="navigateur"> 

<OPTION value="nn">Netscape Navigator</OPTION> 

<OPTION selected value="f f ">Firefox</OPTION> 

<OPTION value="msie">Microsoft Internet Explorer 5 ou 
anté rieur</OPTION> 

<OPTION value="msie6">Microsof t Internet Explorer 6.x 

</OPTION> 
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<OPTI0N value="autre">Texte ou autre</OPTION> 
</SELECT> 

Cet exemple cree ici un menu deroulant proposant les choix qui figurent 
dans les differents elements OPTION. Ce choix de mode de presentation 
depend toutefois de 1' agent utilisateur. 
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Exemple de 
formulaire 




SELECT et OPTION : elements de 
menu 

Choisissez votre navigateur : 




„~v.. 






Netscape Naviqator^^ 




Microsoft Interne! Explorer 5 ou anterieur^ 
Microsoft Internet Explorer 6.x 
7"=>fe ou autre 







Figure 9. 10 : 

Exemple de menu (element SELECT] 

Les principaux attributs de l' element SELECT sont les suivants : 

L'attribut name specifle le nom de la commande. 

L'attribut size specifle le nombre de lignes de la zone de liste 
deroulante, lorsque l'element SELECT se presente comme tel. Les 
agents utilisateurs ne sont pas tenus de presenter l'element 
SELECT sous forme d'une zone de liste : ils peuvent faire appel a 
un autre mecanisme, comme un menu deroulant. 

L'attribut booleen facultatif multiple permet une selection 
multiple. En son absence, l'element SELECT n'autorise qu'une 
selection unique. 

Lorsque l'attribut multiple est specifle, les utilisateurs peuvent choisir 
plusieurs options en maintenant enfoncee la touche [ Ctrl ) pendant qu'ils 
cliquent sur chacun de leurs choix. 

Element OPTION 

Chaque choix d'un menu est represente par un element OPTION. Seule 
la balise d'ouverture est obligatoire, mais, comme nous l'avons deja 
signale, mieux vaut toujours fermer un element HTML. 
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Les principaux attributs de l'element OPTION sont les suivants : 

L'attribut label permet de specifier un intitule pour l'option 
plus court que le contenu de l'element OPTION. Les agents 
utilisateurs doivent employer la valeur de cet attribut, lorsqu'il est 
present, plutot que le contenu de l'element OPTION comme 
intitule de l'option. 

L'attribut facultatif value specifie la valeur initiale de la 
commande. S'il est absent, la valeur initiale est le contenu de 
l'element OPTION. 

L'attribut booleen facultatif selected specifie que l'option est 
preselectionnee. Dans l'exemple precedent, nous avions decide 
que le choix Firefox etait preselectionne : 

<OPTION selected value="f f ">Firefox</OPTION> 

II est possible de preselectionner zero ou plusieurs options. Les agents 
utilisateurs devraient determiner les options preselectionnees comme 
suit : 

Si aucun element OPTION ne possede d'attribut selected, le 
comportement de 1' agent utilisateur vis-a-vis du choix de l'option 
selectionnee initiale est indefini. 

Si un element OPTION possede un attribut selected, alors 
celui-ci devrait etre preselectionne. 

Si l'element SELECT possede un attribut multiple specifie et 
plusieurs elements OPTION avec l'attribut selected specifie, 
alors ceux-ci devraient tous etre preselectionnes. 

Si plusieurs elements OPTION possedent un attribut selected alors que 
l'attribut multiple n'est pas specifie sur l'element SELECT, c'est une 
erreur. Les agents utilisateurs peuvent varier dans la prise en charge de 
cette erreur, mais ils ne devraient pas preselectionner plus d'une option. 

Element OPTGROUP 

Vous pouvez regrouper logiquement des options a l'aide de l'element 
OPTGROUP. Cela est particulierement utile quand l'utilisateur doit 
effectuer un choix a partir d'une longue liste d'options : les groupes 
d'options apparentees sont plus faciles a comprendre et a se rememorer 
qu'une seule longue liste d'options. Dans HTML 4, les groupes 
imbriques sont interdits : tous les elements OPTGROUP doivent etre 
specifies directement dans un element SELECT. 
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Les balises d'ouverture et de fermeture de l'element OPTGROUP sont 
obligatoires. Son principal attribut est label, qui specifle l'intitule du 
groupe d' options. 



Reqroupement 

BEMAROUE 

Des futures versions de HTML pourraient (et devraient) etendre le 
mecanisme de regroupement, de facon a autoriser l'imbrication de 
groupes d'options. 



Voici un exemple d'emploi de l'element OPTGROUP : 

<SELECT name="navigateur"> 
OPTGROUP label="Nescape Navigator"> 

<OPTION label="4-" value="NN4-"> 

AntSeacute; rieur Sagrave; la version 4 . 0</OPTION> 

<OPTION label="4-6" value="NN4_6">Version 4 Sagrave; 6.x 

</OPTION> 

<OPTION label="6 + " value="NN6 + ">Posté rieur Sagrave; 

la version 6.x</0PTI0N> 
</OPTGROUP> 
<OPTGR0UP label="Firefox" selected> 

<OPTION label="1.0" value="FFl">Firefox 1 . 0</OPTION> 

<OPTION label="l.l" value="FFll" selected>Firefox 1.2 

</OPTION> 

<OPTION label="1.2" value="FF12">Firefox 1.2</0PTI0N> 
</OPTGROUP> 
<OPTGROUP label="Internet Explorer"> 

<OPTION label="4-" value="IE4-"> 
Anté rieur Sagrave; la version 4 . 0</OPTION> 
<OPTION label="4-6" value="IE4_6">Version 4 Sagrave; 6 

</OPTION> 

<OPTION label="6+" value="IE6+">Posté rieur 
à la version 6.x</0PTION> 
</OPTGROUP> 

<OPTION selected label="autre" value="autre">Autre</OPTION> 
</SELECT> 

Les agents utilisateurs visuels peuvent autoriser les utilisateurs a 
effectuer une selection a partir des groupes d'options au moyen d'un 
menu hierarchique ou d'un autre mecanisme refletant la structure des 
options : c'est le cas de Firefox, comme le montre la figure suivante 
(voir Figure 9.11). 

Remarquez que chaque sous-menu affiche l'intitule d'un element 
OPTGROUP ou d'un element OPTION. 
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SELECT et OPTION : elements tie 
menu 



Choisissez votre navisateur : 



Autre 



3 



Nescape Navigator 

Anterieura laversion 4.0 
Version A s.6.x 
Version pesterieure alaG.x 
F/refox 
Firefox 1 .0 
Firefox I 



Anterieura laversion 4.0 
Version A a6 



Figure fl. 7 7 ; 

Exemple de menu, avec 
recours a l'element 
OPTGROUP 



Element TEXTAREA 

L'element TEXTAREA permet de creer une zone de texte de saisie 
multiligne. Vos utilisateurs pourront la remplir en soumettant leurs 
commentaires, suggestions ou messages de forum. TEXTAREA permet a 
l'utilisateur de saisir plusieurs lignes de texte. Celles-ci sont contenues 
dans value. Les agents utilisateurs doivent employer comme valeur 
initiale le contenu de cet element, integralement restitue. Les balises 
d'ouverture et de fermeture de cet element sont obligatoires. 

Les attributs de l'element TEXTAREA sont les suivants : 

L'attribut name specifie le nom de la commande. 

L'attribut rows specifie le nombre de lignes de texte visibles. Les 
utilisateurs doivent pouvoir saisir plus de lignes que ce nombre : 
les agents utilisateurs devraient done fournir un moyen de faire 
defiler le contenu de la commande quand celui-ci s'etend au-dela 
de la zone visible. 

L'attribut cols specifie la largeur visible en fonction de la chasse 
moyenne des caracteres. Les utilisateurs doivent pouvoir saisir 
des lignes plus longues que cette largeur. Les agents utilisateurs 
peuvent couper les textes de ligne visibles arm de garder les 
longues lignes visibles sans devoir les faire defiler. 

Voici un exemple : 

<F0RM action="http : //unsite . f r/prog/lecture-texte" 
method="post"> 
<P> 

<TEXTAREA name="le_texte" rows="10" cols="80"> 
Premiè re ligne de texte initial. 
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Seconde ligne de texte initial. 

</TEXTAREA> 

<INPUT type="submit" value="Envoyer"XINPUT type="reset"> 

</P> 
</FORM> 

Cet exemple cree une commande TEXTAREA de dix lignes sur quatre- 
vingts colonnes et qui contient initialement deux lignes de texte. La 
commande TEXTAREA est suivie par deux boutons de soumission et de 
reinitialisation. 
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Exemple de formulaire 



TEXTAREA : zone tie texte multilignes 



Premiere ligne de texte initial. 
Seconde ligne de texte initial. 



Etivoyer | Effacer | 



Figure 9. 12 : 

Exemple d'element 
TEXTAREA 



La specification de l'attribut readonly permet a l'auteur d'afficher un 
texte non modifiable dans la commande TEXTAREA. Cela differe de 
l'emploi d'un texte balise standard dans un document, puisque la valeur 
de l'element TEXTAREA est soumise avec le formulaire. 



Element LABEL 

Quelques commandes de formulaire possedent des libelles ou labels 
automatiquement associes (comme les boutons d' action), mais la plupart 
en sont depourvues (les champs de texte, les cases a cocher, les boutons 
d' option ainsi que les menus). 

Lorsqu'une commande possede un libelle implicite, les agents 
utilisateurs doivent employer la valeur de l'attribut value comme 
chaine de caracteres du libelle. 
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L'element LABEL permet de specifier un libelle pour les commandes 
depourvues de libelle implicite. Chaque element LABEL est associe a 
exactement une commande de formulaire. Ses balises d'ouverture et de 
fermeture sont obligatoires. 

L'attribut for associe explicitement un label a une autre commande : la 
valeur de l'attribut for doit etre la meme que celle de l'attribut id 
d'une certaine commande du meme document. Quand il est absent, le 
libelle qui est defini est associe au contenu de l'element. 

Dans l'exemple suivant, un tableau permet d'aligner deux commandes 
de saisie de texte ainsi que les libelles qui leur sont associes. Chaque 
libelle est associe explicitement a une commande de saisie de texte : 

<FORM action=" ..." method="post"> 

<TABLE> 
<TR> 

<TDXLABEL f or="libelle_prenom">Pré nom</LABEL> 

<TDXINPUT type="text" name="prenom" id="libelle_prenom"> 
<TR> 

<TDXLABEL f or="libelle_nom">Nom</LABEL> 

<TDXINPUT type="text" name="nom" id="libelle_nom"> 

</TABLE> 

</FORM> 
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Exemple de formulaire 

label : libelles 

Prenom | 



1 



Figure 9. 13 : 

Exemple d'elements LABEL 






REMiROUE 



L'attribut for 

II est possible d'associer plusieurs elements label a la meme 
commande en creant plusieurs references via l'attribut for. 



L'exemple complique le precedent, en presentant plus d'elements 

LABEL : 

<FORM action="http : //unsite . f r/prog/ajoutermembre" 
method="post"> 

<TABLE style="margin-left: 30%"> 
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<TR> 

<THXLABEL f or="libelle_prenom">Pré nom : 

</LABELX/TH> 
<TDXINPUT type="text" id="libelle_prenom"x/TD> 
</TR> 
<TR> 

<THXLABEL f or="libelle_nom">Nom : </LABELX/TH> 
<TDXINPUT type="text" id="libelle_nom"x/TD> 
</TR> 
<TR> 

<THXLABEL f or="libelle_email">Adrelle : </LABELx/TH> 
<TDXINPUT type="text" id="libelle_email"x/TD> 
</TR> 
<TR> 

<TD colspan="2"> 

<INPUT type="radio" name="sexe" value="homme"> Homme 
<BR> 

<INPUT type="radio" name="sexe" value="femme"> Femme 
</TD> 
</TR> 
</TABLE> 
<P> 

<INPUT type="submit" value="Envoyer"> <INPUT 
type="reset"> 
</P> 
</FORM> 







Exemple de formulaire 

label : libelles (II) 


Prenoin : | 


Nom: | 


Aclrelle : |~~ 


*~ Homme 

C Femme 
Envoyer | EttQcer 







Figure 9. 14 : 

Exemple d elements LABEL 



Pour associer implicitement un liberie a une autre commande, l' element 
de commande doit se trouver a l'interieur de l'element LABEL. Cet 
element LABEL ne peut alors contenir qu'un seul element de commande. 
Le label en question peut se placer avant ou apres la commande 
associee. 

L'exemple suivant associe implicitement deux libelles a deux 
commandes de saisie de texte : 
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<FORM action=" ..." method="post"> 

<P> 

<LABEL> 

Prénom 

<INPUT type="text" name="prenom"> 
</LABEL> 
<LABEL> 

<INPUT type="text" name="nom"> 

Norn 
</LABEL> 
</P> 
</FORM> 



I ■ n — ju ■--■ m r^. 



Exemple tie formulaire 

label : libelles implicites 

iom| !■ 



Figure 9. 15 : 

Exemple d'elements LABEL 
(libelles implicites) 



Remarquez qu'il est impossible d'employer cette technique lorsque la 
disposition est assuree par un tableau : le libelle se trouve dans une 
cellule et la commande associee dans une autre. 

Lorsqu'un element LABEL recoit le focus, celui-ci est communique a la 
commande associee. Le focus sera etudie dans la suite de ce chapitre. 

Les agents utilisateurs peuvent restituer les libelles de nombreuses facons 
(par exemple : visuellement, lus par des synthetiseurs de parole, etc.). 



Ajout d'une structure a un formulaire : 
elements FIELDSET et LEGEND 

Comme nous l'avons deja largement souligne, une des vocations 
profondes de HTML est de se preoccuper de la structure des documents. 
Cette notion de structure semble quelque peu mise a mal par les 
differents elements de formulaires... 

Heureusement, l'element FIELDSET remedie a cette situation. II permet 
de regrouper par theme les commandes et les libelles apparentes. Le 
regroupement des commandes facilite leur comprehension par les 
utilisateurs, tout en ameliorant la navigation par tabulation pour les 
agents utilisateurs visuels et la navigation vocale pour les agents 
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utilisateurs vocaux. La bonne utilisation de cet element rend plus 
accessibles les documents. 

L'element LEGEND permet aux auteurs d'assigner une legende a un 
element FIELDSET. II renforce l'accessibilite lorsque l'element 
FIELDSET est restitue de maniere non visuelle. Ses balises d'ouverture 
et de fermeture sont obligatoires. 

Le principal attribut de LEGEND est align, desormais deconseille au 
profit des feuilles de style. II positionne la legende par rapport au jeu de 
champs. Ses valeurs possibles sont la valeur par defaut top (au-dessus 
du jeu de champs), bottom (en dessous), left (a gauche) et right (a 
droite). 

L'exemple suivant propose un formulaire de type « recherche de 
logiciel ». II se divise en trois parties : les informations personnelles, le 
systeme d' exploitation et la categorie recherchee. Chaque partie contient 
les commandes pour la saisie des informations concernees. 

<FIELDSET> 

<LEGEND>Système d' exploitation</LEGEND> 
<INPUT name="systeme_expl" type="radio" 

value="Windows" checked> Windows 
<INPUT name="systeme_expl" type="radio" 

value="Mac OX" > Mac OX 
<INPUT name="systeme_expl" type="radio" 

value="Linux"> Linux 
<INPUT name="systeme_expl" type="radio" 
value="autre"> Autre 
</FIELDSET> 
<FIELDSET> 
<LEGEND>Catégorie recerché e</LEGEND> 
Quel type de produit recherchez-vous ? 
<INPUT name="categorie" type="checkbox" 

value="utilitaire">Utilitaire système 
<INPUT name="categorie" type="checkbox" 
value="sonvideo">Son et vidéo 
<INPUT name="categorie" type="checkbox" 
value="bureautique">Bureautique 
<BR> 

Si la caté gorie recherchee ne figure pas 
dans la liste pré cé dente, saisissez 
ci-dessous des mots-clé s séparé s 
par des virgules. 
<BR> 

<TEXTAREA name="recherche" rows="3" cols="80"> 
</TEXTAREA> 
</FIELDSET> 
</FORM> 
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La figure suivante montre 1' aspect de ce formulaire sous Firefox. 



r' " E5f ' tjj 



T^HTMJHSWSratiJWFiiHiiCT 



J ',.J OK IKj 



Excmplc dc formulaire 



FIELDSET et LEGEND : formulaire structure 



Iiifomiciiioiis persormelles 
Nom : 



Prenora : 
autre » iiifonnations persorinelles... 



Systeme d' exploitation 

• "Windows Mac OX Linus Autre 



-Categorie recerchee 

Quel type de prodtut rschemhez-vous ? ' Utilitaire systeme Son et video Bureautiqae 

Sib categorie rscherchee ne figure pa: dans la lists precedents, sa.i.si.sse.z: ci-dessous de? mots-de? 
des virgules. 



F/gore S.7S ; Exemple d'elements FIELSET et LEGEND 

Remarquez qu'il serait possible d'ameliorer a l'aide de la feuille de style 
la presentation visuelle du formulaire, en alignant les elements a 
l'interieur de chaque element FIELDSET et en ajoutant de la couleur et 
des indications de police. Vous pourriez egalement ajouter des scripts, 
par exemple pour n'afficher la zone de texte Recherche que si 
l'utilisateur indique ne pas trouver de categorie, etc. 



9.2. Formulaire et focus 

Dans un document HTML, un element doit recevoir le focus (aussi 
nomme « attention ») grace a une action de l'utilisateur pour devenir 
actif et remplir sa fonction. Par exemple, un utilisateur doit activer (en 
general cliquer) le lien specifie par 1' element A pour suivre le lien en 
question. De la meme maniere, les utilisateurs doivent donner le focus a 
1' element TEXTAREA pour y saisir un texte. 

II existe plusieurs facons de donner le focus a un element : 
En designant 1' element avec un dispositif de pointage. 
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En naviguant d'un element a 1' autre au clavier. II peut avoir ete 
defini un ordre de tabulation specifiant l'ordre dans lequel les 
elements recoivent le focus quand l'utilisateur navigue a l'aide du 
clavier dans le document. Une fois selectionne, 1' element peut 
etre active par une certaine combinaison de touches. 

En selectionnant l'element au moyen d'une touche d'acces rapide 
(appelee aussi parfois « raccourci clavier » ou « cle d'acces »). 

Navigation par tabulation 

Dans un document HTML, plusieurs elements sont soumis a un ordre de 
tabulation, explicite ou implicite. II s'agit essentiellement des elements 
qui reconnaissent l'attribut tabindex, a savoir les elements A, AREA, 
BUTTON, INPUT, OBJECT, SELECT et TEXTAREA. 

L'ordre de tabulation definit l'ordre dans lequel les elements recevront 
le focus lorsque l'utilisateur naviguera a l'aide du clavier. L'ordre de 
tabulation peut comprendre des elements imbriques dans d'autres 
elements. 

Cet ordre de tabulation est defmi de facon explicite a l'aide de l'attribut 
tabindex, pour les elements qui le reconnaissent. Sa syntaxe est la 
suivante : 

tabindex = nombre 

nombre doit etre compris entre et 32 767. Les agents utilisateurs 
doivent ignorer les eventuels zeros de tete. 

Les agents utilisateurs parcourent les elements qui peuvent recevoir le 
focus selon les regies suivantes : 

1 D'abord les elements qui reconnaissent l'attribut tabindex et lui 
assignent une valeur positive. La navigation part de l'element 
dont l'attribut tabindex possede la plus petite valeur pour aller 
vers l'element qui possede la valeur la plus elevee. Les valeurs ne 
se suivent pas forcement, ni ne doivent commencer a une valeur 
particuliere. Les elements dont les valeurs de l'attribut tabindex 
sont identiques sont parcourus dans l'ordre de leur apparition dans 
le flux de caracteres du code. 

2 Ceux des elements qui ne reconnaissent pas l'attribut tabindex, 
ou bien le reconnaissent et lui assignent une valeur 0, sont 
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parcourus ensuite. Ces elements sont parcourus dans l'ordre de 
leur apparition dans le flux de caracteres du code. 

Cela signifie que si aucun element ne possede d'attribut tabindex, 
l'ordre de tabulation sera celui de 1' apparition des elements dans le 
code. 

Les elements inactifs ne participent pas dans l'ordre de tabulation. 

Examinez le listing suivant : 

Listing 9-1 : tabindex.html 

<!DOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 
<HTML> 

<HEAD> 

<TITLE>Exemple de formulaire</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

charset=iso-8 859-1 "> 
<META name="version" content="9 . 1"> 

<META http-equiv="Content-Style-Type" content="text/css"> 
<LINK rel="STYLESHEET" type="text/css" href="style . css"> 
</HEAD> 
<B0DY> 

<Hl>Exemple de formulaire</Hl> 
<H2>Navigation Sagrave; l'aide de la touche 

<C0DE>TAB</C0DEX/H2> 
<P>. . . un texte. . .</P> 
<P>Consultez le 

<A tabindex="10" href="http : //www. w3 . org/"> 

site Web du W3C.</A> 
<BR> 
. . . suite du texte . . . 
<BR> 
<BUTT0N type="button" name="action" tabindex="l" 

onclick="action ( ) "> 
Effectuer 1' action pré vue . 
</BUTT0N> 
<BR> 

. . .suite du texte. . . 
<BR> 
<F0RM action=" . . . " method="post"> 
<P> 

<INPUT tabindex="l" type="text" name="champsl"> 
<INPUT tabindex="2" type="text" name="champs2"> 
<BR> 

<INPUT tabindex="3" type="submit" name="submit"> 
</P> 
</F0RM> 
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</BODY> 
</HTML> 

Dans cet exemple, l'ordre de tabulation est le suivant : l'element 
BUTTON, les elements INPUT dans l'ordre (remarquez que celui nomme 
champsl partage la meme valeur d'attribut tabindex que le bouton, 
mais champsl apparait plus tard dans le flux de caracteres) et enfin le 
lien cree par l'element A. 



_l „■_! .... „„. |, ut 



Exemple de 
formulaire 



Nnvigiition a l'aide de la touche 

TAB 

...un texte... 

Consultez le site Web du W3C. 
...suite du texte... 

Effei-fusr '.?ciir i pti 'im 

...suite du texte... 



Envoyer 



Figure 9.17 : 

Navigation a l'aide de I'attribut 
tabindex 



ATTCNTION 



Touches configurables 

La touche ou la combinaison de touches qui produit la navigation par 
tabulation depend de la configuration de l'agent utilisateur. C'est 
generalement la touche [§] pour la navigation et la touche f^j pour 
l' activation de l'element selectionne, mais cela n'est en rien une 
obligation imperative. 



Les agents utilisateurs peuvent egalement definir des combinaisons de 
cles pour parcourir l'ordre de tabulation a l'envers. Quand la fin ou le 
debut de l'ordre de tabulation est atteint, l'agent utilisateur peut revenir 
en arriere au debut ou a la fin. 
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Touches d'acces rapide 

Vous etes probablement familier avec les touches d'acces rapide de 
votre systeme d' exploitation ou de vos logiciels favoris. Par exemple, 
vous savez certainement qu'avec Windows la combinaison [ctrQ +fc] copie 
un objet, tandis que la combinaison [ctrQ+("v| colle cet objet a 
1' emplacement actif. HTML permet de dennir de telles touches d'acces 
rapide pour un element, a l'aide de l'attribut accesskey. Sa syntaxe est 
la suivante : 

accesskey = caractere 

caractere est un caractere seul qui provient du jeu de caracteres du 
document. 



A 



Cle d'acces 

Pensez a tenir compte de la methode de saisie de l'utilisateur suppose 
lors de la specification d'une cle d'acces. 



Un appui sur la touche d'acces rapide affectee a un element lui procure 
le focus. Ce qui se passe lorsque l'element recoit le focus depend de 
1' element. Par exemple, si l'utilisateur active un lien defmi par un 
element A, 1' agent utilisateur suit en general le lien. Lorsque l'utilisateur 
active un bouton radio, 1' agent utilisateur change la valeur du bouton 
radio. Quand l'utilisateur active un champ de texte, la saisie devient 
possible, etc. 

Vous pouvez dennir un attribut accesskey pour les elements suivants : 

A, AREA, BUTTON, INPUT, LABEL, LEGEND et TEXTAREA. 

L exemple qui suit affecte la touche d'acces rapide Q\T) au libelle associe 
a une commande INPUT. Un appui sur la touche procure le focus au 
libelle, qui le transmet a la commande associee. L'utilisateur peut alors 
saisir un texte dans la zone INPUT. 

<FORM action=" . . . " method="post"> 
<P> 

<LABEL for="libelle_utilisateur" accesskey="N"> 

Norn d' utilisateur 

</LABEL> 

<INPUT type="text" name="nom_utilisateur" 

id="libelle_utilisateur"> 
</P> 
</FORM> 
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Exemple cle 
formulaire 



Navigation a 1'aide d'une touche 
d'acces rapide 



Nom d'utilisateur 



" 



Figure 9. 18 : 

Touches d'acces rapide 



Compliquons cet exemple en ajoutant un lien hypertexte lorsque 
l'utilisateur ne possede pas de compte. Une touche d'acces rapide est 
affectee a ce lien defini par un element A. Un appui sur cette touche 
mene l'utilisateur vers ce qui serait un document offrant un formulaire 
d'ouverture de compte. 

<FORM action=" . . . " method="post"> 

. . . idem ci-dessus . . . 

</FORM> 

<P> 

<LABEL> 

<A rel="contents" accesskey="C" href="inscription.html"> 

CrSeacute;er un compte 
</A> 

</LABEL> 
</P> 



v - V 


- _ J ClI |U N'ZJ *» " |BJ, 


j 




Exemple de 
formulaire 




Na\ 


igation a l'aide d'une toi 
d'acces rapide 


die 


] 


^om d'utilisateur | 






Creer un compte 


: 



Figure 9. 19 : 

Touche d'acces rapide 
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A 



Touches d'acces rapide 

La procedure exacte d'invocation des touches d'acces rapide depend 
du systeme d' exploitation sous-jacent. Avec MS Windows, c'est en 
general une combinaison [a\t\+touche d'acces rapide. Avec un systeme 
Apple, ce serait |cmd| +foi/cfte d'acces rapide. 



La restitution des cles d'acces est fonction de 1' agent utilisateur. Mieux 
vaut inclure la cle d'acces dans le texte du libelle ou partout ou la cle 
d'acces doit s'appliquer. Les agents utilisateurs devraient restituer la 
valeur d'une cle d'acces de facon a mettre son role en evidence et a la 
distinguer des autres caracteres (par exemple, en la soulignant). 



9.3. Commandes inactives et en 
lecture seule 

Parfois, une saisie de l'utilisateur peut etre indesirable ou superflue. II 
faut done pouvoir rendre une commande inactive ou la restituer en 
lecture seule. Vous pourriez par exemple souhaiter que le bouton de 
soumission d'un formulaire reste inactif tant que l'utilisateur n'a pas 
entre certaines donnees obligatoires. De la meme maniere, l'auteur peut 
vouloir inclure un bout de texte en lecture seule, qui doit etre soumis 
comme valeur en meme temps que le formulaire. Les sections suivantes 
decrivent les commandes inactives et celles en lecture seule. 



Commandes inactives 

Vous declarez une commande comme inactive a l'aide de l'attribut 
booleen disabled. La commande est desactivee et refuse toute forme 
d'entree de l'utilisateur. Cet attribut peut etre employe avec les elements 

BUTTON, INPUT, OPTGROUP, OPTION, SELECT et TEXTAREA. 

Lorsqu'il est present dans un element, l'attribut disabled produit 
l'effet suivant : 

Les commandes inactives ne recoivent pas le focus. 

Les commandes inactives sont ignorees au cours d'une navigation 
par tabulation. 

Les commandes inactives ne peuvent pas reussir. 
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Cet attribut est herite, les declarations locales surclassant toutefois la 
valeur heritee. 

Dans l'exemple suivant, l'element INPUT est inactif. II ne peut pas 
recevoir d'entree de l'utilisateur et sa valeur ne peut pas etre soumise 
avec le formulaire. 

<INPUT type="submit" disabled name="Soumettre""> 

La facon dont sont restitues les elements inactifs depend de 1' agent 
utilisateur. Par exemple, certains agents utilisateurs, comme Firefox, 
restituent en « grise » les articles de menu, les labels de bouton, etc., 
inactifs. 





" 1 _J ■-.'■ 






Exemple de 
formulaire 






Bouton inactif 

Envoyer | 


.. 



Figure 9.20 : 

Commande desactivee 



Seul un script peut modifier dynamiquement la valeur de 1' attribut 

disabled. 



Commandes en lecture seule 

L'attribut booleen readonly , lorsqu'il est present dans une commande 
de formulaire, interdit les modifications de la commande. Vous pouvez 
l'employer avec les elements INPUT et TEXTAREA. 

Quand il est present, l'attribut readonly produit les effets suivants sur 
l'element : 

Les elements en lecture seule recoivent 1' attention mais les 
utilisateurs ne peuvent pas les modifier. 

Les elements en lecture seule sont inclus dans la navigation par 
tabulation. 

Les elements en lecture seule peuvent reussir. 
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La facon dont sont restitutes les elements en lecture seule depend de 
1' agent utilisateur. 

Voici un exemple : 

Système d' exploitation : <INPUT name="systeme_expl" 
type="text" value="Windows" readonly > 

jk^Jl • IV • p^ u,J \fj} |U _y U Ul |y. 



Exemple de 
formulaire 



Comnmnde en lecture seule 

Sy steme Sexploitatio n : 

(Windows 



Figure 9.21 : 

Commande en lecture seule 



II est impossible de modifier le contenu de la zone de texte presentee 
dans la figure precedente. 

Seul un script peut modifier dynamiquement la valeur de l'attribut 

readonly. 



9.4. Soumission du formulaire 

Dans tout ce qui precede, nous avons examine avec soin les elements 
grace auxquels il etait possible de faire saisir des informations par 
l' utilisateur. Le formulaire rempli, F utilisateur clique sur le bouton 
Soumettre. Les sections suivantes expliquent la maniere dont les agents 
utilisateurs soumettent les donnees de formulaire aux agents qui traitent 
les formulaires. 



Methodes de soumission du formulaire 

L'attribut method de l'element FORM specifie la methode HTTP 
employee pour envoyer le formulaire a l' agent de traitement. Cet attribut 
admet deux valeurs : 
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get : l'ensemble des donnees du formulaire est rajoute a l'URI 
specifie par l'attribut action (avec comme separateur un 
caractere point d' interrogation ?) et ce nouvel URI est envoye a 
1' agent de traitement. 

post : l'ensemble des donnees de formulaire est inclus dans le 
corps du formulaire et envoye a 1' agent de traitement. 

La methode get est a preferer lorsque le formulaire ne produit aucun 
effet secondaire (il est alors dit « idempotent »). La plupart des 
recherches dans une base de donnees sont depourvues d'effets 
secondaires visibles et font des applications ideales pour la methode 
get. Les moteurs de recherche emploient get : une demande de 
recherche n'ajoute rien a un fichier ou ne modifie en rien les donnees du 
serveur. 

Si le service associe au traitement d'un formulaire entraine des effets 
secondaires (par exemple, si le formulaire modifie une base de donnees 
ou l'abonnement a un service), mieux vaut employer la methode post. 
Elle est ainsi employee pour les pages d'inscription, les salles de 
discussion et les forums de discussion en ligne. 






Le codaqe des caracteres avec Get et Post 

RBURUE 

La methode get restreint les valeurs du jeu des donnees du formulaire 
aux caracteres ASCII. En revanche, la methode post, lorsqu'elle est 
specifiee avec l'attribut enctype="multipart/form-data", recouvre 
la totalite du jeu de caracteres ISO 10646. 



Commandes reussies 

Une commande est dite « reussie » lorsque son nom est apparie a sa 
valeur courante et que ce couple appartient au jeu des donnees du 
formulaire qui est soumis. Une commande reussie peut etre soumise. 
Une commande reussie doit etre definie dans un element FORM et 
posseder un nom de commande. 

Remarquez toutefois que : 

Les commandes inactives ne peuvent reussir. 

Si le formulaire contient plusieurs boutons de soumission, seul le 
bouton de soumission actif reussira. 
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Toutes les cases a cocher activees (sur « marche ») peuvent 
reussir. 

Dans le cas de boutons d'option qui partagent le meme nom (la 
meme valeur pour l'attribut name), seul le bouton d'option active 
peut reussir. 

Pour les menus, le nom de commande est donne par 1' element 
SELECT et les valeurs sont fournies par les elements OPTION. 
Seules les options selectionnees peuvent reussir. Si aucune option 
n'est selectionnee, la commande echoue : ni le nom ni aucune 
valeur ne sont soumis au serveur avec le formulaire. 

La valeur courante d'une selection de fichiers est une liste d'un ou 
plusieurs noms de fichiers. Lors de la soumission du formulaire, 
le contenu de chaque fichier est soumis avec le restant des 
donnees du formulaire. Les contenus des fichiers sont 
conditionnes en fonction du type de contenu du formulaire. 

La valeur courante d'une commande d'objet est determined par 
1' implementation de l'objet. 

Si une commande est depourvue de valeur courante au moment de la 
soumission du formulaire, les agents utilisateurs ne sont pas obliges de 
la traiter comme une commande reussie. 

En outre, les agents utilisateurs ne doivent pas considerer les 
commandes suivantes comme etant reussies : 

Les boutons de reinitialisation. 

Les elements OBJECT dont l'attribut declare n'est pas specifie. 

Les commandes cachees et les commandes qui ne sont pas restituees en 
raison de l'effet d'une feuille de style peuvent quand meme reussir. Par 
exemple : 

<FORM action=" ..." method="post"> 

<P> 

<INPUT type="password" style="display : none" 

name="mot_de_passe_invisible" 

value="mon_mot_de_passe"> 
</FORM> 

Cela entraine malgre tout l'accouplement de la valeur au nom 
mot de passe invisible et leur soumission avec le formulaire. 
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Traitement des donnees du formulaire 

Lorsque l'utilisateur soumet le formulaire (par exemple, en activant un 
bouton de soumission), 1' agent utilisateur le traite de la maniere 
suivante. 

1 Premiere etape : identification des commandes reussies. 

2 Deuxieme etape : construction du jeu des donnees du formulaire 
(le jeu des donnees du formulaire est la sequence des couples 
« nom de commande/valeur courante » construite a partir des 
commandes reussies). 

3 Troisieme etape : codage du jeu des donnees du formulaire. 

Le jeu des donnees du formulaire est alors code en fonction du 
type de contenu specifie par l'attribut enctype de l'element 

FORM. 

4 Quatrieme etape : soumission du jeu des donnees du formulaire 
code. 

5 Enfin, les donnees codees sont envoyees a 1' agent de traitement 
designe par l'attribut action, en utilisant le protocole specifie 
par l'attribut method. 

Cette specification ne definit pas toutes les methodes de soumission 
valides ni les types de contenu qui peuvent etre employes avec les 
formulaires. Les agents utilisateurs HTML 4 doivent cependant obeir 
aux conventions etablies dans les cas suivants : 

Si la valeur de l'attribut method est get et la valeur de l'attribut 
action est un URI HTTP, alors l'agent utilisateur prend la valeur 
de l'attribut action, lui rajoute un caractere ? et enfin le jeu des 
donnees du formulaire, code en utilisant le type de contenu 
application/x-www-f orm-urlencoded. L'agent utilisateur 
traverse alors le lien vers cet URI. Dans ce scenario, les donnees 
du formulaire se limitent aux codes ASCII. 

Si la valeur de l'attribut method est post et la valeur de l'attribut 
action est un URI HTTP, alors l'agent utilisateur conduit une 
transaction HTTP post en utilisant la valeur de l'attribut action 
et un message cree en fonction du type de contenu specifie par 
l'attribut enctype. 

Pour toute autre valeur de l'attribut action ou method, le 
comportement n'est pas specifie. 
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Les agents utilisateurs devraient restituer les reponses des transactions 
HTTP get et post. 



Types de contenu du formulaire 

L'attribut enctype de l'element FORM specifle le type de contenu utilise 
pour coder le jeu des donnees du formulaire en vue de sa soumission au 
serveur. Les agents utilisateurs doivent reconnaitre les types de contenu 
listes ci-dessous. Le comportement pour d'autres types de contenu n'est 
pas specifle. 

Le type de contenu par defaut est application/x-www 
-form-urlencoded. Les formulaires soumis avec ce type de contenu 
doivent etre codes comme suit : 

1 Les noms de commandes et les valeurs sont echappees. Les 
caracteres « espace » sont remplaces par des caracteres plus (+) 
puis les caracteres reserves sont echappes comme decrit dans le 
document [RFC 1738], section 2.2. Les caracteres non 
alphanumeriques sont remplaces par une sequence de la forme 
%HH : un caractere pourcentage et deux chiffres hexadecimaux qui 
represented le code ASCII du caractere en question. Les sauts de 
ligne sont representes par des couples de caracteres CR LF 
(%0D%0A). 

2 Les couples nom/valeur des commandes sont listes selon leur 
ordre d' apparition dans le document. Le nom est separe de la 
valeur par un caractere egal =, et les couples nom/valeur sont 
separes les uns des autres par des esperluettes (&). 

Le type de contenu application/x-www-form-urlencoded est 
inefficace pour 1' envoi de grandes quantites de donnees binaires ou de 
texte contenant des caracteres non ASCII. 

L'autre valeur possible est multipart/ form-data. C'est le type de 
contenu a employer pour la soumission de formulaires contenant des 
fichiers, des donnees non ASCII et des donnees binaires. 
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9.5. Remarques a propos 
des formulaires 

Avant de creer un formulaire sur votre site, la premiere chose qui vous 
vient a l'esprit est de degager les questions qui vont etre posees, et celles 
qui seront obligatoires. II est en effet possible d'empecher la soumission 
d'un formulaire si un des champs obligatoires n'est pas rempli. Ceci est 
souvent utilise sur le Web pour exiger un nom ou une adresse. 
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Figure 9. 22 : 

Champs de formulaire 
obligatoires, dans le formulaire 
d'enregistrement du site de 
Micro Application. 

Cela n'est toutefois qu'un aspect du probleme. II est plus important 
encore de savoir de quelles informations vous avez reeilement besoin et 
comment expliquer ce fait a 1' utilisateur. Certains sites exigent beaucoup 
plus d' informations que necessaire. Est-il reeilement indispensable de 
demander son numero de telephone a un utilisateur pour obtenir 
simplement des commentaires sur votre site ? Toute information possede 
une valeur, et les utilisateurs deviennent de plus en plus mefiants sur les 
donnees qu'ils fournissent gratuitement. lis peuvent en outre ne pas 
savoir qui vous etes exactement, ou pourquoi vous voulez cette 
information. 

Vous ne devez demander et a plus forte raison n' exiger que les 
informations strictement necessaires a l'objectif de votre formulaire. Si 
la raison pour laquelle vous voulez ces informations n'est pas 
instantanement evidente, alors expliquez vos motivations. Si vous 
conservez des donnees utilisateur dans un fichier, vous devez declarer 
celui-ci a la CNIL (Commission Nationale Informatique et Liberie). 

Un formulaire HTML ne presente que peu ou pas d'interet en l'absence 
d'un dispositif capable de traiter les informations recueillies. Ce 
traitement est generalement effectue a l'aide de scripts, qui feront l'objet 
du prochain chapitre. 
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Un formulaire constitue un moyen d'apporter un peu 
d' inter activite a une page HTML. 

Vous creez un formulaire dans une page HTML a l'aide de 
1' element FORM. Cet element agit comme conteneur general du 
formulaire, notamment pour les commandes. 

Les utilisateurs interagissent avec les formulaires au moyen de 
commandes nominees. Le « nom » d'une commande est specifie 
par son attribut name. Chaque commande possede a la fois une 
valeur initiale et une valeur courante. La valeur initiale d'une 
commande peut generalement etre specifiee a l'aide de 1' attribut 
value de l'element de commande. 

HTML defmit plusieurs grands types de commandes : boutons 
d'action, cases a cocher, boutons d'option, menus, saisie de texte 
et selection d'un fichier. 

L'element INPUT est le plus employe dans un formulaire. II 
permet de creer des boutons d'action, des cases a cocher, des 
boutons d'option, la saisie d'un texte d'une ligne et la selection de 
fichiers. Son attribut type specifie le type de la commande. 

La valeur text est la valeur par defaut de cet attribut. Elle cree 
une commande de saisie de texte sur une seule ligne. La valeur 
password cree une commande de saisie de texte sur une seule 
ligne de type « mot de passe » : le texte saisi est restitue de 
maniere a dissimuler les caracteres. La valeur checkbox cree une 
case a cocher, tandis que la valeur radio cree un bouton 
d'option. Les valeurs submit et reset creent respectivement un 
bouton de soumission et un bouton de reinitialisation. La valeur 
image cree un bouton de soumission graphique. La valeur 
button cree un bouton d'action. La valeur hidden cree une 
commande cachee. Enfin, la valeur file cree une commande de 
selection de fichiers. 

Les boutons crees par l'element BUTTON fonctionnent exactement 
comme ceux crees avec l'element INPUT, mais offrent des 
possibilites de restitution plus variees, puisque l'element BUTTON 
peut posseder un contenu. 

Vous creez un menu a l'aide d'un element SELECT. Chaque 
option du menu est representee par un element OPTION. Un 
element SELECT doit contenir au moins un element OPTION. 
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Vous pouvez regrouper logiquement des options a l'aide de 
l'element OPTGROUP. 

L'element TEXTAREA permet de creer une zone de texte de saisie 
multiligne. 

L'element LABEL permet de specifier un libelle pour les 
commandes depourvues de libelle implicite. 

L'element FIELDSET permet de regrouper par theme les 
commandes et les libelles apparentes. 

L'element LEGEND permet aux auteurs d'assigner une legende a 
un element FIELDSET. 

Vous pouvez donner le focus a un element de plusieurs facons : a 
l'aide d'un dispositif de pointage, en naviguant d'un element a 
l'autre au clavier selon l'ordre de tabulation ou a l'aide de touches 
d'acces rapide. 

L'ordre de tabulation est defini de facon explicite a l'aide de 
l'attribut tabindex. Une touche d'acces rapide est definie pour 
un element a l'aide de l'attribut accesskey. 

Vous declarez une commande comme inactive a l'aide de 
l'attribut booleen disabled. 

L'attribut booleen readonly, lorsqu'il est present dans une 
commande de formulaire, interdit les modifications de cette 
commande. 

L'attribut method de l'element FORM specifie la methode HTTP 
employee pour envoyer le formulaire a 1' agent de traitement. Cet 
attribut admet deux valeurs : get et post. 

Une commande est dite « reussie » lorsque son nom est apparie a 
sa valeur courante et que ce couple appartient au jeu des donnees 
du formulaire qui est soumis. 

Les donnees sont envoyees a 1' agent de traitement designe par 
l'attribut action, en utilisant le protocole specifie par l'attribut 

method. 

L'attribut enctype de l'element FORM specifie le type de contenu 
utilise pour coder le jeu des donnees du formulaire en vue de sa 
soumission au serveur. II existe deux types de contenu reconnus : 
par defaut, application/x— www— form— urlencoded et 
multipart/ form-data, a employer pour la soumission de 
formulaires contenant des fichiers, des donnees non ASCII et des 
donnees binaires. 
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Vous savez desormais creer une page Web d'une relative complexite 
sans trop de difficultes. Vous savez y incorporer des graphismes et y 
adjoindre des liens. Vous allez dans ce chapitre apprendre a doter vos 
pages Web de plus de dynamisme grace a l'emploi de scripts. 

Un script est un programme ecrit dans un langage de programmation 
particulier. Son execution est declenchee par un evenement qui se produit 
sur la machine cliente, soit automatiquement (comme au chargement d'un 
document HTML) soit suite a une action de l'utilisateur. 

II existe deux types de scripts : les scripts cote serveur et les scripts cote 
client. 

Les scripts cote serveur sont situes et s'executent comme leur 
nom l'indique sur le serveur, et peuvent envoy er un resultat vers 
la machine cliente. lis etaient anciennement de type CGI 
(Common Gateway Interface), une technique qui permettait de 
lancer un programme sur une machine en utilisant les entrees de 
celle d'un client. D'autres scripts cote serveur comprennent des 
images cliquables cote serveur et des extensions ou API 
brevetees, comme ASP (Active Server Pages), ColdFusion, 
FrontPage Extensions ou le tres populaire PHP. 

Les scripts cote client sont des programmes qui peuvent 
accompagner le document HTML ou bien y etre directement 
incorpores. lis s'executent sur la machine cliente (preservant ainsi 
les ressources du serveur) egalement suite a un evenement. Nous 
reviendrons par la suite sur les evenements HTML. HTML gere les 
scripts d'une facon independante du langage de script. Ces scripts 
sont generalement rediges en JavaScript ou en VBScript, et 
necessitent de l'utilisateur un navigateur capable et autorises a lire 
et a executer le langage de script que vous utilisez, quel qu'il soit. 
Les scripts cote client sont done tres dependants du navigateur, mais 
ils sont aussi bien plus rapides que ceux cote serveur. 

Ce chapitre s'interesse essentiellement aux scripts cote client. 

Elements et attributs etudies dans ce chapitre : 

SCRIPT, type, language, sre, charset, defer 

NOSCRIPT 

APPLET, code, width, height 

OBJECT, codetype, codebase, classid, data, type, archive, 

declare, standby 
PARAM, name, value, valuetype 
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10.1. Introduction aux scripts 



Les scripts permettent d'augmenter la reach vite et le dynamisme de 
documents HTML. Par exemple : 

Modifier dynamiquement le contenu d'un document lors du 
chargement de celui-ci. 

Accompagner un formulaire et valider les donnees avant la 
soumission. 

Actions particulieres suite a un evenement comme le chargement, 
le dechargement, la prise de focus d'un element, le mouvement de 
la souris, etc. 

Action liee aux commandes d'un formulaire (par exemple, les 
boutons) pour simuler une interface utilisateur graphique. 

Cette liste permet de separer les scripts en deux categories principales : 

Scripts a action unique : ils sont executes une seule fois, lors du 
chargement du document par 1' agent utilisateur. Ils apparaissent 
dans le document a l'interieur d'un element SCRIPT. Pour tenir 
compte des agents utilisateurs qui ne peuvent pas gerer les scripts, 
mieux vaut inclure un contenu de remplacement via 1' element 
NOSCRIPT. 

Ces scripts sont capables de modifier dynamiquement le contenu du 
document. Leurs capacites dependent du langage de script concerne. La 
modification dynamique d'un document peut etre modelisee comme 
suit : 

Tous les elements SCRIPT sont evalues dans l'ordre au fur et a 
mesure du chargement du document. 

Toutes les structures de script a l'interieur d'un element SCRIPT 
donne, qui generent des valeurs SGML de type CDATA, sont 
evaluees. Leur texte genere combine est insere dans le document a 
la place de l'element SCRIPT. 

Les donnees generees de type CDATA sont reevaluees. 

Par exemple, imaginons le fragment de document suivant (vous 
l'etudierez plus en detail par la suite) : 

<script language=" JavaScript"> 

<! — 

Navigateur = navigator .appName; 
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if (Navigateur == 'Netscape') 

{ 

document .write ("<TDXA href=' region nets .html' ") ; 

} 

if (Navigateur == 'Microsoft Internet Explorer') 

{ 

document .write ("<TDXA href=' region IE. html' ") ; 

} 

document .writeln ("target=princ>Ma ré gion</Ax/TD>" 

II— > 

</script> 

Considerons que vous l'examinez avec un navigateur de type Netscape, 
configure pour accepter les scripts. 

1 Le navigateur examine le contenu de 1' element SCRIPT. 

2 Comme il s'agit d'un navigateur de type Netscape, c'est le 
premier cas de l'instruction conditionnelle qui est evalue. Le 
moteur de script place done dans le document la chaine de 
caracteres <TDxA href =' region_nets.html' , sort de 
l'instruction conditionnelle, puis insere la chaine target 
=princ>Ma ré gion</Ax/TD> et sort de 1' element 
SCRIPT. Le navigateur interprete ensuite la chaine totale, soit : 

<TDXA href =' region IE .html' target=princ>Ma ré gion 

</A></TD> 

S'il s'etait agi d'un navigateur Internet Explorer, le resultat aurait 
ete : 

<TDXA href=' region nets .html' target=princ>Ma région 
</A></TD> 

Les documents HTML sont contraints de se conformer au DTD HTML 
avant comme apres le traitement de chaque element SCRIPT. 

Scripts repetitifs : ils sont executes chaque fois qu'un evenement 
particulier se produit. Ils peuvent etre affectes a un certain nombre 
d'elements a l'aide des attributs d' evenement intrinseque, etudies 
plus loin. 

HTML ne depend pas d'un langage de script particulier. Les auteurs des 
documents indiquent explicitement aux agents utilisateurs le langage de 
chaque script. 

Les deux grands langages de script cote client, JavaScript (developpe 
par Netscape) et VBScript (Microsoft), ont mene une bataille feroce arm 
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d'attirer 1' attention des developpeurs. Microsoft a meme developpe sa 
propre version de JavaScript, nominee JScript. Cela s'est traduit a 
l'epoque par une fragmentation croissante des sites Web : une fonction 
n'etait reconnue que par un type de navigateur et partageait le public en 
deux parties, ceux qui possedaient un navigateur compatible et tous les 
autres. 

Tout ce qui impose aux concepteurs Web de faire un choix quant a la 
plate-forme de destination est une negation de la technologie et de 
1' esprit qui regit Internet et le World Wide Web. L'idee originelle etait et 
reste de partager idees et informations, independamment de l'ordinateur, 
du systeme d' exploitation ou de 1' application. 

La tendance est toutefois desormais au respect de ECMAScript, une 
tentative de normalisation du noyau du langage JavaScript et de ses 
derives : sa syntaxe, ses mots-cles et ses composants natifs. La troisieme 
edition du standard ECMA-262 a ete publiee en decembre 1999 
(www.ecma-international.org/publications/standards/Ecma-262.htm). 

Nous reviendrons plus en detail sur ces principaux langages dans la suite 
de ce chapitre. Pour le moment, interessons-nous a la facon d'incorporer 
un script cote client a un document HTML. 

10.2. Element SCRIPT 

Vous inserez un script dans un document a l'aide de l'element SCRIPT, 
obligatoirement dote de balises d'ouverture et de fermeture. Cet element 
peut apparaitre un nombre quelconque de fois dans les elements HEAD 
ou BODY d'un document HTML. 

Par exemple, ajoutons a notre page d'accueil un petit script : 

1 Ouvrez accueil.html dans le Bloc-Notes. 

2 Modifiez le numero de version : 

<META name="version" content="3 . 10 . 1"> 

3 Inserez, dans l'element H2 du corps (l'element BODY), l'element 
SCRIPT suivant, en remplacant ce qui se trouve entre la balise 
d'ouverture H2 et l'element EM : 

<H2> 

<SCRIPT type="text/javascript"> 
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document. write ("Bienvenue sur ") 
</SCRIPT> 
— > 

<EM>mon</EM> site.</H2> 



4 Enregistrez votre fichier, sans modifier son nom, puis ouvrez 
index.html dans un navigateur. Guere passionnant : l'effet est 
strictement identique a la version precedente (regardez la 
Figure 10.1 et comparez-la a la Figure 8.10). 
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Figure 10.1 : 

Votre premier script 
JavaScript 



Ce script JavaScript (remarquez la valeur de l'attribut type) est en effet 
d'une grande simplicity, puisqu'il ne contient qu'une instruction : 
document .write signifie « imprimer a l'ecran l'information placee 
entre parentheses ». Celle-ci etant identique au texte original, aucune 
difference n'est visible. Autrement dit, ce script est strictement identique 
a la version precedente du code, soit : 

<H2>Bienvenue sur <EM>mon</EM> site.</H2> 



Nous reviendrons par la suite sur la signification des lignes < ! - 
mais souvenez-vous qu'il s'agit d'un commentaire HTML. 



et — >, 



A 



JavaScript desactive 

Aucune difference n'est visible si, et seulement si, votre navigateur est 
configure de fafon a autoriser les scripts. Si ce n'est pas le cas, vous 
obtenez quelque chose de similaire a ce qui est presente figure suivante. 
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Figure 10.2 : 

Page d'accueil sous Firefox, 
JavaScript etant desactive. 






REMAROUE 



Activer JavaScript 

Vous activez JavaScript avec Firefox en choisissant Outils > Options. 
Selectionnez General dans la zone de gauche, puis cochez l'option 
Autoriser JavaScript. 

Avec Internet Explorer, les reglages s'effectuent en choisissant Outils > 
Options Internet, puis en cliquant sur l'onglet Securite. Reportez-vous 
pour plus de details a la documentation de votre navigateur. Internet 
Explorer 6 vous informe si une page contient un ou plusieurs script alors 
que le navigateur n'est pas configure pour les accepter. 

Figure 10.3 : 

} Message d'internet Explorer, qui signale que les 



r^ 



a prciteger votre ordinate 



scripts sont desactives. 



Ce script ne presentant guere d'interet, essayons autre chose 

1 Revenez a accueil.html, ouvert dans le Bloc-Notes. 

2 Enregistrez le fichier sous le nom accueil_3_10_1.html. 

3 Modifiez le numero de version : 

<META name="version" content="3 . 10 . 2"> 

4 Redonnez a l'element H2 sa forme anterieure : 

<H2>Bienvenue sur <EM>mon</EM> site.</H2> 
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5 Inserez apres cet element le code suivant : 

<SCRIPT type="text/JavaScript"> 
<! — 

document .write ("<P>Vous utilisez un navigateur " 
+ navigator . appName + "</P>"); 
— > 
</SCRIPT> 

6 Enregistrez votre fichier sous le nom accueil.html, puis ouvrez 
index.html dans un navigateur. Le resultat est plus interessant. 
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Figure 10.4 : 

Affichage du type de 
navigateur a I'aide 
d'un script 
JavaScript 



Remarquez dans cette figure que Firefox est identine comme navigateur 
Netscape. II est possible d'obtenir plus de details, en particulier sur la 
version employee, comme vous le verrez par la suite. 



Definition du type de script : declaration 
META et attribut type de I'element SCRIPT 

Nous ne le repeterons jamais assez : HTML ne depend pas d'un langage 
de script particulier. Vous devez indiquer explicitement aux agents 
utilisateurs le langage de chaque script. 

Vous pouvez specifier un langage de script par defaut pour tous les 
scripts d'un document. Pour ce faire, placez la declaration META 
suivante dans I'element HEAD : 

<META http-equiv="Content-Script-Type" 
content=" un_certain_type"> 
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La valeur un certain type represente le type de contenu qui nomme 
le langage de script, par exemple text/tcl, text/JavaScript ou 
text/vbscript. 

Un document qui ne specine pas de langage de script par defaut et qui 
contient un ou plusieurs elements specifiant un ou plusieurs scripts 
d'evenement intrinseque est incorrect. Les agents utilisateurs peuvent 
toujours essayer d'interpreter les scripts specifies incorrectement, mais 
ne sont nullement tenus de le faire. 

Vous pouvez egalement specifier localement le langage d'un script en 
definissant l'attribut type de son element SCRIPT dans le document. La 
valeur de l'attribut type specifie le langage de script du contenu de 
1' element. II outrepasse le langage de script par defaut. Le langage de 
script est specifie comme type de contenu (par exemple, 
text/ javascript). II faut fournir une valeur pour cet attribut, qui est 
depourvu de valeur par defaut. Cet attribut remplace desormais l'attribut 
language, qui specifiait le langage de script du contenu de cet element 
a l'aide d'un identifiant du langage. Ces identifiants n'etant pas 
normalises, l'attribut est deconseille en faveur de l'attribut type. 



Autres attributs de I'element SCRIPT 

Un script peut etre defini en contenu de I'element SCRIPT (comme dans 
les exemples precedents) ou dans un fichier externe. L'attribut src 
specifie alors l'emplacement du script externe : 

<SCRIPT type="text/ javascript" src="quelquepart/script . js"> 

Si l'attribut src n'est pas specine, 1' agent utilisateur doit interpreter le 
contenu de I'element comme etant le script. Dans le cas contraire, 
1' agent utilisateur doit ignorer le contenu de I'element et ramener le 
script designe par l'URI. Remarquez que l'attribut optionnel charset 
se refere a l'encodage de caracteres du script designe par l'attribut src 
et non au contenu de I'element SCRIPT. 

Quand il est present, l'attribut booleen defer indique a l'agent 
utilisateur que le script ne va generer aucun contenu de document (par 
exemple, aucune instruction document .write en JavaScript). L'agent 
utilisateur peut done poursuivre 1' analyse et la restitution. 
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pas les scripts 

Les scripts sont precieux, mais il serait dommage de fonder un site sur 
1' exploitation de ceux-ci sans tenir compte des agents utilisateurs qui ne 
reconnaissent pas les scripts. Deux precautions sont a prendre : 

Fournir un contenu de remplacement aux agents utilisateurs qui 
ne reconnaissent pas les scripts ou ne sont pas configures pour les 
accepter. 

Dissimuler le contenu de ceux-ci pour les agents utilisateurs qui 
seraient susceptibles d'afficher leur contenu comme du texte. 

Nous allons examiner ces deux precautions. 

Element IMOSCRIPT 

L'element NOSCRIPT permet de fournir un contenu de remplacement 
lorsque, pour une raison quelconque, un script n'est pas execute. Le 
contenu de l'element NOSCRIPT ne doit etre restitue par un agent 
utilisateur reconnaissant les scripts que dans les cas suivants : 

L' agent utilisateur est configure pour ne pas executer (evaluer) les 
scripts. 

L' agent utilisateur ne reconnait pas le langage de script invoque 
par un element SCRIPT apparu plus tot dans le document. 

Les agents utilisateurs qui ne gerent pas les scripts cote client doivent 
restituer le contenu de cet element. 

Dans l'exemple suivant, l'agent utilisateur qui interprete l'element 
SCRIPT va inclure certaines donnees creees dynamiquement dans le 
document. S'il ne reconnait pas les scripts, l'utilisateur peut toujours 
obtenir les donnees grace a un lien. 

<SCRIPT type="text/javascript"> 

...un script javascrit qui incorpore des donné es . . . 
</SCRIPT> 
<NOSCRIPT> 

<P><A href="http : //quelquepart . fr /donnees ,html"> 
Accè aux donné es . 
</A> 
</NOSCRIPT> 
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Grace a l'element NOSCRIPT, 
indications a vos visiteurs. 



vous pouvez fournir de precieuses 
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Figure 10.5 : 

Exemple de contenu d'un 
element NOSCRIPT 



Dissimulation des donnees de script 
aux agents utilisateurs 

La seconde precaution consiste a dissimuler le contenu des scripts. En 
effet, un agent utilisateur qui ne reconnait pas l'element SCRIPT va 
vraisemblablement restituer le contenu de cet element comme un texte. 
Certains moteurs de script, dont ceux des langages JavaScript et 
VBScript, autorisent la delimitation des declarations d'un script par un 
commentaire SGML < ! — — >. Les agents utilisateurs qui ne 
reconnaissent pas l'element SCRIPT ignoreront le commentaire tandis 
que les moteurs de script intelligents comprendront que le script dans le 
commentaire doit etre execute. 



REMSRaUE 



Solution alternative 

Une autre solution a ce probleme consiste a placer les scripts dans des 
documents externes et a les appeler avec l'attribut src. 



Avec JavaScript, vous pouvez employer la chaine <! — au debut de 
l'element SCRIPT : le moteur ignore les caracteres suivants jusqu'a la 
fin de la ligne. JavaScript interprete la chaine // comme le debut d'un 
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commentaire qui s'etend jusqu'a la fin de la ligne courante. Elle est 
necessaire pour dissimuler la chaine — > a l'analyseur JavaScript (meme 
si celle-ci ne lui pose generalement pas de probleme). 

Voici un exemple : 

<SCRIPT type="text/javascript"> 

<!— dissimulation du contenu du script aux anciens navigateurs 
function square (i) { 

document .write ("1/ appel a passé ", i , 

" à la fonction . ", "<BR>") 
return i * i 
} 

document .write ("La fonction a renvoy&e ", square (i) ,"." ) 
// fin de la dissimulation du contenu --> 
</SCRIPT> 

Avec VBScript, c'est le caractere « guillemet simple » qui fait, du reste 
de la ligne courante, un commentaire. Par exemple : 

<SCRIPT type="text/vbscript"> 
<! — 

Sub foo() 

End Sub 
' --> 

</SCRIPT> 

Vous l'avez compris, le choix du caractere de commentaire depend du 
langage de script employe. Avec Tel, par exemple, ce serait le caractere 
#, etc. 



A 



Fermeture de commentaires 

Certains navigateurs referment les commentaires au premier caractere 
> rencontre. Pour dissimuler le contenu du script a ces navigateurs, vous 
pouvez transposer les operandes des operateurs relationnels et de 
decalage (par exemple, en ecrivant y < x plutot que x > y) ou 
employer le mecanisme d'echappement du langage de script pour le 
caractere >. 



10.3. Evenements intrinseques 

Chaque langage de script obeit a ses propres regies pour appeler des 
objets HTML a partir d'un script. La specification HTML ne definit 
aucun mecanisme standard d' appel des objets HTML. La syntaxe des 
donnees du script depend du langage de script. 
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Les scripts doivent toutefois referer a un element en fonction du nom 
qui lui est assigne. Les moteurs de script doivent observer la regie de 
preseance suivante dans 1' identification d'un element : l'attribut name 
est prioritaire sur l'attribut id si les deux sont presents. Sinon, l'un ou 
1' autre peuvent etre employes indifferemment. 

II est possible d'associer une action a un certain nombre d'evenements, 
qui se produisent lorsque l'utilisateur interagit avec 1' agent utilisateur. 
Chacun des evenements intrinseques prend comme valeur un script : 

nom_evenement=" script" 



A 



Evenements intrinseques 

Des modifications vont probablement etre apportees aux evenements 
intrinseques, notamment en ce qui concerne la facon dont les scripts sont 
rattaches aux evenements. Les recherches dans ce domaine sont menees 
par les membres du groupe de travail sur le Modele Objet de Document 
(DOM) du W3C. Consultez le site Web du W3C (www.w3.org/) pour plus 
de renseignements. 



Le script s' execute chaque fois que l'evenement se produit pour cet 
element. La syntaxe des donnees de script depend du langage de script. 

Les evenements reconnus par les differents elements HTML sont 
presentes dans le tableau suivant. 



Tableau 10. 1 : Evenements intrinseques HTML 


Evenement Survient lorsque 


Evenements concernant les elements BODY et FRAMESET 


onload 


L'agent utilisateur finit de charger une fenetre ou bien 
tous les cadres dans un jeu d'encadrement frameset 


onunload 


L'agent utilisateur retire le document d'une fenetre ou 
d'un cadre 


Evenements de formulaire [element FORM) 


onsubmit Un formulaire est soumis 


onreset Un formulaire est reinitialise 


Evenements concernant les commandes de formulaire 
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Evenement 


Survient lorsque 


onf ocus 


Un element recoit le focus via le dispositif de pointage ou 
une navigation par tabulation. S'applique aux elements A, 

AREA, LABEL, INPUT, SELECT, TEXTAREA et BUTTON. 


onblur 


Un element perd le focus via le dispositif de pointage ou 
une navigation par tabulation. S'applique aux memes 
elements que onf ocus. 


onselect 


L'utilisateur selectionne un certain texte dans un champ 
textuel. S'applique aux elements input et textarea. 


onchange 


Une commande perd le focus ou sa valeur a ete modifiee 
depuis I'instant ou elle a recu le focus. S'applique aux 
elements input, select et textarea. 


Evenements generiques. Tous les elements, sauf applet, base, 

BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, 
ISINDEX, META, PARAM, SCRIPT, STYLE et TITLE. 


onclick 


Le bouton du dispositif de pointage est clique au-dessus 
d'un element 


ondblclick 


Le bouton du dispositif de pointage est double-clique au- 
dessus d'un element 


onmousedown 


Le bouton du dispositif de pointage est appuye au-dessus 
d'un element 


onmouseup Le bouton du dispositif de pointage est relache au-dessus 
d'un element 


onmouseover Le dispositif de pointage est deplace sur un element 


onmousemove Le dispositif de pointage est deplace alors qu'il est au- 
dessus d'un element 


onmouseout Le dispositif de pointage est deplace en dehors d'un 
element 


onkeypress Une touche est pressee puis relachee au-dessus d'un 
element 

onkeydown Une touche est gardee appuyee au-dessus d'un element 


onkeyup Une touche est relachee au-dessus d'un element 



Comme vous pouvez le voir, la liste des evenements qu'il est possible 
d'identifier et de relier a une action est impressionnante. Vous pouvez 
par exemple employer des elements de commande de formulaire 

(INPUT, SELECT, BUTTON, TEXTAREA et LABEL), qui repondent tous a 
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certains evenements intrinseques, pour ameliorer 1' interface utilisateur 
graphique du document. 

Voici quelques exemples d'emploi d' evenements intrinseques. 

Nous avions vu, lors de l'examen des formulaires, que certains champs 
pouvaient etre obligatoires, et qu'il etait possible de tester la validite des 
donnees d'un formulaire avant sa soumission a l'aide de scripts. 

Dans le premier exemple, la commande nommee nomUtilisateur est 
un champ obligatoire. Lorsque 1' utilisateur quitte ce champ, celui-ci 
perd le focus (evenement onblur), ce qui appelle une fonction 
JavaScript qui teste la validite de nomUtilisateur. 

<INPUT name="nomUtilisateur" 

onblur="verifNomUtilisateur (this .value) "> 

Dans 1' exemple suivant, le champ nombre doit normalement contenir 
une valeur comprise entre 1 et 10. Le code JavaScript suivant verifie ce 
fait apres la saisie d'un nombre par l'utilisateur : 

<INPUT name="nombre" 

onchange="if ( IverifNombre (this .value, 1, 10)) 

{ this . focus (); this . select (); ) else { remercier ( ) } " 
value="0"> 



Document .write 
REMARQUE ,, , , . , , , , 

Une declaration document. write ou equivalente placee dans un 
gestionnaire d'evenements intrinseques cree et ecrit vers un nouveau 
document au lieu de modifier le document courant. 



Voici enfin un autre exemple d'emploi d'evenements intrinseques. 
Supposons que nous ayons modifie la barre de navigation en remplacant 
le texte par une icone. Pour 1' icone correspondant a Accueil, ce pourrait 
etre une icone nommee accueil.gif. 

Le fichier de la barre de navigation a ete modifie en consequence (ce 
fichier se trouve dans les fichiers exemples sous le nom barrenavl .html ; 
vous devez l'appeler a l'aide du fichier index1.html, egalement present) : 

<TD><A href ="accueil . html" target=princ> 

<IMG src="images/accueil . gif " alt="Accueil" border="0"> 

</A> 
</TD> 
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L' aspect de la barre de navigation, ainsi modifiee, serait quelque chose 
d' analogue a ce qui est presente dans la figure suivante. 
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Figure 10.6 : Aspect de la barre de navigation modifiee 

Imaginez que nous voulions que l'utilisateur visualise encore mieux sa 
navigation en modifiant l'aspect de l'icone. Pour faire simple, nous nous 
sommes bornes ici a inverser les couleurs de l'icone, a l'aide de la 
fonction Negatif de Paint Shop Pro, pour creer un fichier nomme 
accueil2.gif. 
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Figure 10.7 : 

Aspect des icones accueil.gif et 
accueil2.gif 

Nous modifions alors comme suit l'element A qui concerne la page 
d'accueil, en ajoutant ce qui suit : 

<TD><A href ="accueil . html" target=princ 

onmouseover="t=acc . src;acc . src=acc . lowsrc" 

onmouseout="acc. src=t" 

> 
<IMG name="acc" lowsrc="images/accueil2 .gif " 

src="images/accueil . gif " alt="Accueil" border="0"> 
</A> 
</TD> 



Ce fichier se trouve dans les fichiers exemples, sous le nom 
barrenav2.html. En l'examinant dans votre navigateur (en appelant 
index2.html, egalement fourni), vous constatez que, lorsque votre 
dispositif de pointage (en principe votre souris) est place au-dessus de 
l'icone Accueil, celle-ci se modifie immediatement : cela ajoute de 
l'interactivite et du dynamisme a votre site, pour des efforts somme 
toute relativement faibles. 
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Figure 10.8 : Modification a la volee de I'icone selon que le dispositif de 
pointage est place ou non dessus 

Ce petit fragment de code merite que vous l'examiniez d'un peu plus 
pres, pour comprendre ce qui se passe. II est un peu particulier en ce 
qu'il n'emploie pas un « vrai » script (vous remarquerez l'absence 
d'element SCRIPT), mais a recours au Modele Objet de Document 
(DOM) sous-jacent a tout document HTML ou XML bien forme. 
Regardez d'abord l'element IMG : vous l'avez nomme (name="acc"), 
avez laisse l'attribut sre defini comme precedemment, mais avez 
egalement defini un autre attribut, lowsrc, avec comme valeur la 
seconde icone. 

Dans l'element A, vous avez ajoute deux gestionnaires d'evenements : 
un pour onmouseover (la souris est sur I'icone) et un pour 
onmouseout (la souris quitte I'icone). 

Par defaut, la souris n'est pas sur I'icone et I'icone affichee est celle qui 
correspond a la valeur de l'attribut sre de l'element IMG (ou ace . sre, 
puisque cet element se nomme ace), soit done celle situee a l'URI 

images /accueil . gif . 

Lorsque la souris se place sur I'icone, la valeur de ace . sre est placee 
dans la variable t et est remplacee par la valeur de ace. lowsrc, soit 
l'URI qui mene a la seconde icone : images/accueil2 . gif. L'agent 
utilisateur applique alors la modification et affiche la seconde icone. 

Lorsque le curseur quitte I'icone, la valeur de t est placee dans 
ace . sre et la premiere icone est a nouveau affichee. 



Modele Objet de Document DOM 

Le Modele Objet de Document (DOM), specification du W3C (http: 
//xmlfr.org/w3c/TR/REC-D0M-Level-l/), est une interface de programmation 
d' applications (API) pour documents HTML et XML. II se divise en 
deux parties : DOM Core (ou noyau) et DOM HTML (les specifications 
propres a HTML). 
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Le DOM definit la structure logique des documents ainsi que la 

REMARQUE 

facon dont vous accedez aux elements et les manipulez. Avec le 
Modele Objet de Document, les programmeurs peuvent construire des 
documents, naviguer dans leur structure, et ajouter, modifier ou 
supprimer des elements ou du contenu. Tout ce qui se trouve dans un 
document HTML ou XML peut etre accede, change, detruit ou ajoute 
en utilisant le Modele Objet de Document, a quelques rares exceptions 
pres. DOM est congu pour etre utilise avec n'importe quel langage de 
programmation. 

Dans DOM, les documents ont une structure logique comparable a une 
arborescence. Le nom « Modele Objet de Document » a ete choisi parce 
qu'il s'agit d'un « modele objet » au sens traditionnel de la conception 
orientee objet : les documents sont modelises en utilisant des objets, tandis 
que le modele ne contient pas uniquement la structure du document mais 
aussi son comportement et celui des objets dont il est compose. En 
d'autres termes, les noeuds ne representent pas une structure de donnees, 
mais des objets possedant une identite, un comportement et des proprietes. 
Le DOM contient egalement les evenements associes aux differents 
elements du document. 

Par exemple, dans l'exemple ci-dessus, DOM contient 1' element HTML A 
ainsi que les evenements associes onMouseOver et onMouseOut. Les 
attributs des elements HTML nommes sont traites comme des proprietes 
de l'objet. Ainsi, vous accedez a l'attribut src de l'element IMG nomme 
ace a l'aide de ace . src. 

Une etude plus complete du DOM depasse largement l'objectif de ce 
livre. Reportez-vous si necessaire a la specification du W3C, a l'adresse 
indiquee en haut de cet encadre. 



10.4. Travail avec les scripts 



Vous devez 1' avoir compris, si inserer un script, interne ou externe, dans 
un document HTML ne presente guere de difficultes, e'est tout autre 
chose des que Ton passe a la redaction de ces scripts. 

Les langages de script sont generalement reputes ne pas etre tres faciles 
a apprendre. Si vous souhaitez vous y attaquer, commencez par la 
syntaxe : e'est la grammaire fondamentale des langages informatiques, 
de programmation, de script ou hypertextes. Apres avoir compris la 
syntaxe, passez au vocabulaire : les mots reserves et les noms. Par 
exemple, en quoi un frame JavaScript differe-t-il d'un FRAME HTML ? 
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Vous pouvez apprendre un langage de script en utilisant la meme 
methode que celle dont vous vous etes servi pour HTML : en achetant 
un ouvrage consacre au langage qui vous interesse, en examinant des 
codes source dans votre navigateur Web, ainsi qu'en menant des 
recherches dans les listes de diffusion et les forums de discussion. 

Sans vouloir plonger trop avant dans 1' etude de ces langages de script, il 
existe une methode simple et efficace : reutiliser du code. 

Vous avez remarque que, dans les pages HTML que nous avons creees, 
de nombreuses parties de code etaient repetitives : plutot que de les 
saisir a nouveau, un simple copier-coller permet d'obtenir rapidement le 
resultat souhaite. II en va de meme pour les scripts : reutiliser vos 
fragments de code economise du temps et des efforts. Si une fonction ou 
une sous-routine fonctionne a la perfection, mieux vaut ne pas la 
reecrire dans chaque document, mais en faire un script externe appele 
par plusieurs documents. En outre, de nombreux concepteurs 
independants partagent leur travail avec tous, encourageant le public a 
utiliser et a reutiliser a leur guise leurs scripts. Lorsque vous voulez 
accomplir quelque chose, il existe de fortes chances pour qu'un 
programmeur autre que vous y ait deja pense et ait meme propose son 
script gratuitement sur le Net. 

Un dernier point : la securite des scripts. Les scripts sont globalement 
bien moins dangereux qu'on ne le laisse supposer. Plus exactement, les 
dangers qu'ils presentent sont le plus souvent dus a des failles de 
securite des navigateurs et des systemes d' exploitation. Des mises a jour 
sont regulierement diff usees pour pallier ces failles lorsqu'elles sont 
identifiees. Veillez a toujours rechercher au moins mensuellement les 
mises a jour de securite qui s'appliquent a votre navigateur et a votre 
systeme d'exploitation. 

Nous allons maintenant examiner un peu plus en detail les principaux 
langages de script. 



JavaScript 

Le JavaScript est un langage qui permet d'ecrire des scripts incorpores 
dans un document HTML. Historiquement, c'est le premier langage de 
script pour le Web qui a permis aux developpeurs Web d'executer de 
petits programmes sur le navigateur Web plutot que sur le serveur Web, 
d'ou le terme de script cote client. 
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JavaScript a ete mis au point par Netscape en 1995. A l'origine, il se 
nommait LiveScript et etait destine a fournir un langage de script simple 
au navigateur Netscape Navigator 2. II a, a l'epoque, ete longtemps 
critique pour son manque de securite, son developpement peu pousse et 
1' absence de messages d'erreur explicites rendant delicate son 
utilisation. Le 4 decembre 1995, suite a une association avec le 
constructeur Sun, Netscape rebaptise son langage JavaScript (un clin 
d'oeil au langage Java developpe par Sun). A la meme epoque, 
Microsoft met au point le langage JScript, un langage de script tres 
similaire. 

De ce fait, le langage JavaScript dans ses differentes versions (jusqu'a 
2.0 pour JavaScript au sens strict, plus les versions de JScript) est 
fortement dependant du navigateur appelant la page Web dans laquelle 
le script est incorpore (reportez-vous plus loin au tableau page 407). 
Ainsi, pour eviter toute derive, un standard a ete defmi pour normaliser 
les langages de script. II s'agit de l'ECMA-262, aussi appele 
ECMAScript, cree par l'organisation du meme nom (ECMA, European 
Computer Manufactures Association). Nous reviendrons par la suite sur 
ECMAScript. 

II ne necessite toutefois pas de compilateur, contrairement au langage 
Java avec lequel il a longtemps ete et reste parfois confondu : le code est 
directement ecrit dans la page HTML. C'est un langage peu evolue qui 
ne permet aucune confidentialite au niveau des codes : ceux-ci restent 
visibles. 

Vous avez deja rencontre JavaScript dans ce chapitre. Ce livre n'a pas 
pour vocation de vous apprendre tout ce qu'il faudrait savoir a propos de 
JavaScript, mais vous allez cependant en decouvrir la syntaxe principale 
et le vocabulaire de base. Cela est suffisant pour debuter avec 
JavaScript. 

JavaScript permet de personnaliser l'apparence de documents HTML, 
d'ouvrir et de fermer des boites de dialogue surgissantes (pop-up), de 
manipuler des cookies, d'executer des calculs ainsi que de generer et de 
manipuler dynamiquement le contenu de la page HTML elle-meme. 
JavaScript a recours au Modele Objet de Document (DOM), cite dans la 
section precedente, pour modifier dynamiquement la page Web. 

La syntaxe de JavaScript differe de celle d'HTML, sans en devenir pour 
autant effrayante. La syntaxe de base du langage, largement inspiree de 
celle de C/C++, presente les caracteristiques suivantes : 
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Les commandes sont separees par un point-virgule (;). 

Les accolades { } definissent un bloc de commande et permettent 
de limiter la portee des variables. 

Un commentaire sur une ligne est precede de //. 

Un commentaire sur plusieurs lignes est encadre par la balise 
d'ouverture /* et la balise de fermeture */. 

JavaScript est sensible a la casse. Cela signifie que si vous concevez une 
fonction nommee Date, vous ne pourrez l'appeler a l'aide de date, 
DATE ou DaTE : il faut imperativement l'appeler avec Date. 

JavaScript est enfin un langage script oriente objets, ce qui signifie que 
vous pouvez creer des classes et des instances d'objets. JavaScript 
propose en standard un certain nombre de classes, que vous pourrez 
utiliser a votre aise pour creer vos programmes. II sera done possible 
d' avoir des syntaxes du type : 

objet .methode (parametre) ; 

L'utilite de JavaScript pour les auteurs de pages Web dynamiques tient 
en grande partie au recours a des fonctions. Un script JavaScript peut 
etre une simple ligne de code permettant de capturer la saisie d'une 
portion de texte, ou de la date et de l'heure courantes. Une fois la page 
chargee, il n'existe aucun moyen de mettre a jour l'heure sans avoir 
recours a un element MET A Refresh ou sans demander a l'utilisateur 
d'actualiser (ou de recharger) la page. Si cependant le script qui permet 
d'inclure l'heure est situe dans une fonction JavaScript, celle-ci peut etre 
executee chaque fois que l'utilisateur accomplit une certaine action, 
comme deplacer la souris sur une image ou cliquer sur un bouton. 

Voici un exemple classique de code JavaScript, adapte pour une 
meilleure conformite avec la specification HTML 4.01 a partir d'un 
fichier disponible gratuitement sur l'excellent site de Je JavaScript.net 
(www.jejavascript.net/date.php). Ce script n'a qu'un but : afficher la date 
systeme. 

Listing 10-1 : date.js 

01 // PLF - http://www.jejavascript.net/ 

02 var datedujour, date, mois, moisl, jour, jourl, an; 

03 datedujour = new Dated; 

04 jour = datedujour .getDay ( ) 

05 switch (jour) { 

06 case 1 : 

07 jourl ="Lundi" 
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8 break; 

09 case 2 : 

10 jourl ="Mardi" 

11 break; 

12 case 3 : 

13 jourl ="Mercredi" 

14 break; 

15 case 4 : 

16 jourl ="Jeudi" 

17 break; 

18 case 5 : 

19 jourl ="Vendredi" 

20 break; 

21 case 6 : 

22 jourl ="Samedi" 

23 break; 

24 case : 

25 jourl ="Dimanche" 

26 break; 

27 ) 

28 date = datedujour .getDate ( ) 

2 9 mois = datedujour .getMonth ( ) 

30 switch (mois+1) ( 

31 case 1 : 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
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moisl 


=" Janvier" 


break; 




case 2 : 




moisl 


="FSeacute; v 


break; 




case 3 : 




moisl 


="Mars" 


break; 




case 4 : 




moisl 


="Avril" 


break; 




case 5 : 




moisl 


="Mai" 


break; 




case 6 : 




moisl 


=" Juin" 


break; 




case 7 : 




moisl 


="Juillet" 


break; 




case 8 : 




moisl 


="Aoû t 


break; 




case 9 : 




moisl 


="Septembre" 


break; 




case 10 




moisl 


="0ctobre" 
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60 break; 

61 case 11 : 

62 moisl ="Novembre" 

63 break; 

64 case 12 : 

65 moisl ="DSeacute; cembre" 

66 break; 

67 } 

68 an = datedujour . getFullYear ( ) 

Les lignes ont ete numerotees uniquement pour faciliter 1' interpretation 
ulterieure. 

Le fichier tel qu'il est presente est un fichier externe, que vous devez 
appeler comme suit dans votre element HEAD : 

<SCRIPT type="text/ javascript" src="date . j s"> 

Ce code JavaScript calcule la date systeme. Comment fonctionne-t-il ? 

1 Vous defmissez dans la ligne 2 plusieurs variables : datedu j our, 
date, mois, moisl, jour, jourl et an. 

2 Dans la ligne 3, vous affectez a datedujour la valeur renvoyee 
par la methode globale Date ( ) . 

3 Dans la ligne 4, vous affectez a la variable jour la valeur 
renvoyee par la methode datedujour . getDay () . Celle-ci 
renvoie un nombre qui correspond au jour de la semaine. 

4 Les lignes 5 a 27 sont une instruction conditionnelle qui affecte a 
la variable jourl le nom du jour de la semaine en lettres. 

5 Dans la ligne 28, vous affectez a la variable date la valeur 
renvoyee par la methode datedujour . getDate () . Celle-ci 
renvoie un nombre qui correspond au jour du mois. 

6 Dans la ligne 29, vous affectez a la variable mois la valeur 
renvoyee par la methode datedujour . getMonth () . Celle-ci 
renvoie un nombre qui correspond au mois. Les lignes 30 a 67 
sont une instruction conditionnelle qui affecte a la variable moisl 
le nom du mois en lettres. 

7 Dans la ligne 68, vous affectez a la variable an la valeur renvoyee 
par la methode datedujour .getFullYear () . Celle-ci renvoie 
un nombre qui correspond au jour du mois. 

Nous avons defini des variables, mais ne les avons pas encore 
employees : cela respecte le principe de la separation des logiques de 
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travail et de presentation. Pour afficher la date du jour, placez ce qui suit 
dans un element SCRIPT dans le corps de votre document HTML : 

<SCRIPT type="text/javascript"> 
document .write ("<DIV style=' text-align: center; 
font-weight: bold; font-size: +2") ; 

document .write (jour 1, " ") ; 
document .write (date, " "); 
document .write (moisl , " ") ; 
document .write (an, " "); 
document . write ( "</DIV>" ) ; 
</SCRIPT 

Cela ecrit dans le document la date systeme, au sein d'un element DIV a 
style defini. 



<? ■ 4- - & 9 ® W3 ® « IhT 



Ma page 
d'accueil 



Bienvcnuc sur mon site. 



Yemlreili 2 Septemlne 2005 



Figure 10.9 : 

Affichage de la date systeme a 
I'aide d'un script 



Ce script n'est qu'un exemple. II pourrait etre ecrit de bien d'autres 
facons pour parvenir au meme resultat. Par exemple, JavaScript permet 
l' utilisation de matrices dans vos scripts. Celles-ci sont definies a I'aide 
de crochets [ ] . Vous pourriez ainsi employer des matrices au lieu 
d' instructions conditionnelles. Le programme deviendrait alors : 

Listing 10-2 :date2.js 

01 // PLF - http://www.jejavascript.net/ Modifs : F. Lemainque 

02 var datedujour, date, mois, moisl, jour, jourl, an; 

03 nomMois = new Array ("Janvier" , "Fé vrier", "Mars", 

"Avril" , "Mai" , " Juin" , " Juillet" , "Aoû t" , 
"Septembre", "Octobre", "Novembre", "Dé cembre") ; 

04 nomjours = new Array ("Dimanche", "Lundi", "Mardi", 

"Mercredi", "Jeudi", "Vendredi", "Samedi") ; 

05 datedujour = new Dated; 

6 jour = datedujour .getDay ( ) 

07 jourl = nomjours [jour] 

08 date = datedujour .getDate ( ) 

09 mois = datedujour .getMonth () 

10 moisl = nomMois [mois] 

11 an = datedujour . getFullYear ( ) 
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Le fichier est nettement plus court : 1 1 lignes au lieu de 68 ! II pourrait 
d'ailleurs etre rendu encore plus compact, mais nous laissons cela a 
votre sagacite. Examine dans votre navigateur, il procure des resultats 
identiques a la version precedente. 



O - ■ -& U' ©nT3 ©<* [ET 



Ma page 
d'accueil 



Bienvenue sur mon site. 

Vendredi 2 Septembre 2005 



Figure 10.10 : 

Autre script d'affichage de la date 
systeme 



A 



Cadres cibles et JavaScript 

JavaScript utilise des cadres cibles et des fenetres nominees pour 
controler le contenu d'un document Web. II peut vous jouer des tours 
quand vous ciblez a partir d'un cadre possedant une cible de base 
(element base). Selon le navigateur, JavaScript peut employer la cible 
de base au lieu de la cible specifiee dans le script. Vous pouvez 
contourner ceci en retirant l' element base de votre page de cadres. 



Comme tout bon langage, JavaScript possede un « vocabulaire » 
constitue de mots individuels qui, lorsqu'ils sont combines en fonctions, 
ordonnent au navigateur Web d'accomplir quelque chose via le moteur 
de script. Vous trouverez certains des mots de ce vocabulaire dans le 
tableau page 406. 

Tres succinctement, comme nous l'avons signale plus haut, vous pouvez 
decomposer le langage JavaScript en objets, methodes et evenements. 
L' ensemble d' objets disponibles pour le langage de script depend du 
navigateur utilise. II s'agit du Modele Objet de Document (Document 
Object Model, ou DOM), deja aborde. 

Les methodes deflnissent les actions de JavaScript. Dans l'exemple 
precedent, 

document .write (jour 1, " "); 
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a recours a la methode write () pour inserer du texte dans l'objet 
document, et le faire ainsi apparaitre dans votre navigateur Web. 

Enfin, les evenements permettent d'appeler les fonctions. Si les 
fonctions sont un ensemble d' instructions executees chaque fois que 
vous prononcez le mot magique, alors l'evenement est ce mot magique. 
Si le script contient une fonction nominee OuvreFenetre, vous 
pourriez appeler celle-ci a l'aide d'un evenement comme : 

<BODY onLoad="OuvreFenetre ()">, 

Cela execute le script. onLoad est l'evenement qui indique au 
navigateur quand appeler la fonction et executer le script. Voici un 
exemple : 

<SCRIPT LANGUAGE="javascript"> 

<! -- 

function OuvreFenetre ( ) { 

remote = window. open ("", "remotewin", width=125,height=175) ; 

remote . location . href = "fenetre.html"; 

if (remote .opener == null) remote . opener = window; 

remote . opener . name = "opener "; 



II— > 

</SCRIPT> 
</HEAD> 
<BODY onLoad 



="OuvreFenetre () " bgcolor="#FFFFFF"> 



Si vous placez ce script dans une page Web et ouvrez celle-ci avec votre 
navigateur, vous pourriez obtenir 1' avertissement presente dans la figure 
suivante : ici les fenetres surgissantes (popup) sont desactivees et 
Firefox vous previent de la tentative. 



<^ - v - 



© [lT3 ® « [ST 



] Firefox a smpeche ce ;ite d'ouvi-ii une fsnetre popup. Ciiquez ici pour 
les options... 



Ouverture 
d'une fenetre 
par un script 



Figure 10.11 : 

Les fenetres surgissantes sont 
desactivees 
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En autorisant les fenetres surgissantes pour ce site et en rafraichissant 
votre document dans le navigateur, vous voyez apparaitre une nouvelle 
fenetre. 



EE^smammansM^m 


^]cj*l| 




Ceci est une 

fenetre ouverte 

par un script 










Termine 



Figure 10.12 : 

Apparition d'une fenetre 
surgissante 



Globalement, les fenetres surgissantes sont plus souvent penibles 
qu' utiles : mieux vaut les laisser desactivees et ne les activer que lorsque 
cela est reellement necessaire. 

Le vocabulaire JavaScript contient bien d'autres mots, en sus des objets, 
methodes et evenements presentes ici : par exemple, les matrices, les 
instructions et les operateurs. Une matrice est une collection d'objets ou 
de variables regroupes sous un meme nom de variable. Nous en avons 
employe dans le fichier date2.js : 

nomMois = new Array ( 

"Janvier", "Fé vrier", "Mars", "Avril" , "Mai", 
"Juin", "Juillet", "Aout", "Septembre", "Octobre", 
"Novembre", "Dé cembre") ; 

Certaines instructions utilisent des mots reserves, comme if, else if 
et switch. Nous avions employe cette derniere instruction dans le 
fichier date2.js : 

switch (jour) { 

... instructions case ... 

} 

Chacune de ces instructions possede un sens precis pour JavaScript. 
C'est ainsi que switch signifie « branchez-vous sur l'instruction case 
qui correspond a la valeur du parametre et accomplissez l'instruction 
mentionnee, puis sortez de l'instruction switch ». 
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II existe egalement de nombreux operateurs, les plus courants servant 
pour des operations mathematiques ou comme operateurs de 
comparaison, par exemple dans une instruction if. 

Les objets documents, comme document .cookie, appartiennent aussi 
bien a JavaScript qu'au Modele Objet de Document (DOM). JavaScript 
possede plusieurs objets integres, comme l'objet cookie, qui peuvent 
etre utilises automatiquement comme parties de l'objet document. Les 
mises en ceuvre Netscape et Microsoft du DOM sont toutefois 
longtemps restees incompatibles, rendant difficile la vie du concepteur 
Web. 

Le tableau suivant presente quelques exemples d'objets ou proprietes 
document, precieux en JavaScript. 



Tableau 10.2 : 


Proprietes de document JavaScript 


Norn de la 
propriete 


Exemple 




But 


Equivalent 
HTML 


alinkColor 


document 
.alinkColor 

.tccoooo 




Definit la couleur des liens 
selectionnes 


<BODY alink 
="#CC0000"> 


bgColor 


document 
.bgColor. #FFFFFF 


Definit la couleur d'arriere- 
plan 


<BODY bgcolor 

="FFFFFF"> 


Cookie 


document 
.cookie 




Obtient la valeur de tout 
cookie associe a ce 
document 




fgColor 


document 
.fgColor. #000000 


Definit la couleur du texte 


<BODY text 
="#000000"> 


lastModif ied 


document 

.lastModif ied 


Obtient la date de derniere 
modification du document 
actif 


linkColor 


document 

. linkColor 

.toooocc 




Definit la couleur des liens 


<BODY link 
="#0000CC"> 


Location 


document 

.location 




Obtient I'URL du document 


<!-#echo var 
="DOCUMENT URI"> 


Ref errer 


document 
.ref errer 




Lit I'URL du document cible 
(la page Web Nee au 
document actif) 




Title 


document .ti 


tie 


Recupere le titre (I'element 
title) du document actif 




URL 






Voir location 
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Tableau 10.2 : 


Proprietes de document JavaScript 


Norn de la 
propriete 


Exemple 




But 


Equivalent 
HTML 


vlinkColor 


document 

.vlinkColor 

.#ccoocc 




Definit la couleur des liens 
visites 


<BODY vlink 
="#CC00CC"> 



Nous avons dit que le rendu et le bon fonctionnement de JavaScript 
dependaient largement du navigateur employe. 

Le tableau suivant presente les versions de JavaScript prises en charge 
par les principaux navigateurs. 



Tableau 10.3 : Versions JavaScript et navigateurs 


Version de 
JavaScript 


Navigateurs 


JavaScript 1 .0 


Netscape Navigator 2.0, Internet Explorer 3.0, 
Opera, Mozilla 


JavaScript 1.1 Netscape Navigator 3.0, Opera, Mozilla 


JavaScript 1 .2 


Netscape Navigator 4.0/4.05, Internet Explorer 4.0, 
Opera, Mozilla 


JavaScript 1 .3 


Netscape Navigator 4. OB, Internet Explorer 5.0, 
Opera, Mozilla 


JavaScript 1 .4 

JavaScript 1 .5 
JavaScript 1 .6 


Netscape Navigator 6.0, Internet Explorer 6.0, 
Opera, Mozilla 

Netscape Navigator 6.0, Mozilla 

Firefox 1.5/Gecko 1.8 


JavaScript 1 .7 


Firefox 2/Gecko 1.8.1 


JavaScript 1 .8 Firefox 3/Gecko 1 .9 [a paraTtre]. 



Si vous devez ecrire plusieurs versions d'un programme, arm de tenir 
compte des agents utilisateurs employes par vos visiteurs, il serait 
interessant de pouvoir determiner le type d' agent utilisateur employe. 
Cela est possible : nous 1' avons fait, quoique de facon tres primitive, 
dans la derniere version du fichier accueil.html : 

<SCRIPT type="text/javascript"> 
<! — 
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document .write ("<P>Vous utilisez un navigateur 
+ navigator . appName + "</P>"); 
— > 
</SCRIPT> 



II est possible de faire bien mieux, grace aux proprietes de l'objet 
navigator de JavaScript. 

1 Ouvrez accueil.html dans le Bloc-Notes. 

2 Enregistrez le fichier sous le nom accueil_3_10_2.html. 

3 Modinez le numero de version : 

<META name="version" content="3 . 10 .3"> 

4 Deplacez l'element SCRIPT par couper-coller juste avant 
1' element HP, du bas de la page. 

5 Inserez apres la ligne de commentaire de l'element SCRIPT le 
code suivant, en remplacement de la ligne actuelle : 

<SCRIPT type="text/JavaScript"> 

<! — 

document . write ( " <TABLE width= ' 7 % ' >" ) ; 

document . write ( "<TR>" ) ; 

document. write ("<TD>Nom et version de votre navigateur 

</TD><TD>") ; 
document. write (navigator . appName + " " + navigator 
s* . appVersion) ; 
document . write ( "</TDx/TR>" ) ; 
document . write ( "<TR>" ) ; 
document. write ("<TD>Informations détaillees sur 

votre agent utilisateur</TD><TD>" ) ; 
document . write (navigator . userAgent) ; 
document. wri te ("</TDx/TR>") ; 
document . write ( "</TABLE>" ) ; 
// — > 
</SCRIPT> 

6 Enregistrez votre fichier sous le nom accueil.html, puis ouvrez 
index.html dans un navigateur. Le resultat peut vous surprendre... 
(voir Figure 10.13, 10.14, 10.15). 

Cela est obtenu a l'aide des precieuses proprietes de l'element 
navigator, presentees dans le tableau suivant. 
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Chapitre 1 



i iii iiiiiii nun iiiiiiiiiiiii^ 

Fichier Edition ftffic'hage Sjfet a Mr; que -pages Outils 



9 



<* ■ 



@ f file:///G:JHTMLJMon°vjj © OK 1 0, 
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Nom et version de voire 

navigateur 

Informations detaillees 

sur votre agent 

utilisateur 



Netscape 5.0 (Windows: fr-FR) 

Mozilla/5.0 (Windows: TJ; Windows NT 

5.1; fr-FR; rv:1.7.10) Gecko/200? 07 17 

Firefox/l.O.fi 



:' Si :/:'■■■ . k:.'>,\* /sspi 



a cont.act.er pour tout 



zl 



Figure 10.13 : 

Affichage detaille du 
type de navigateur et 
du systeme 
d'exploitation a I'aide 
d'un script 
JavaScript, 
respectivement pour 
Firefox, ... 



^ifll-*] 



Affichage Favor Is Outils ? 
Q Precedents - \J - \x\ \£\ jj | p 



Rechercher y ? Fav 



alt 



Adresse : G:\MTML\Mon 5i;ei lQ\lndex.html 



^IB ^ 



Accueil Ma r eg ; ■ . Mes passions I 

piUJJU&Ct H-U6BSUB. 



Nom et version de voire 
navigateur 



Microsoft Internet Explorer 4.0 

(compatible; MSIE 6.0; Windows NT 5.1; 

SV1; .NET CLR 1.1.4322) 

Informations detaillees Mozilla/4.0 (compatible: MSIE 6.0: 
sm- votre agent Windows NT 5.1; SV1; .NET CLR 

utilisateur 1.1.4322) 



m 



Tit 



| -J Posts de travail 



Figure 10. 14 : 

. . . pour Internet 
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Accueil Ma re. ei ■ - Mes passions I 



Nom et version de 
votre navigateur 


Netscape 5.0 (Windows; fr-FR) 


Informations detaillees 

but votre agent 

ntilisateur 


MozUla/5.0 (Windows; U: Windows NT 

5.1; fr-FR; rv.1.7.5) Gecko/20050330 

Liiispire Incl.OPR 



Normal | "'.J Ballses HTML | '■_] 5ol 



: 



Figure 10.15 

. . . pour Nvu. 
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Tableau 10.4 : Proprietes JavaScript de I'objet navigateur [navigator] 


Propriete Description Exemple 


appCodeName Renvoie le nom de code du 
navigateur, le plus souvent 
Mozilla, le moteur utilise par la 
plupart des navigateurs (Internet 
Explorer, Netscape, mais aussi 
beaucoup de navigateurs sous 
Unix.). Cette valeur sera 
differente si le navigateur du 
client est fonde sur un autre 
moteur, comme Opera. 


Mozilla 


appName Renvoie le nom du navigateur (la 
plupart du temps la marque). 
Cette propriete est utile pour 
differencier les navigateurs de 
Netscape et de Microsoft. 


Netscape 


appversion Renvoie la version du navigateur 
sous la forme suivante : numero 
de version (systeme 
d'exploitation): nationality) . 
Elle est utile pour connaltre le 
systeme d'exploitation de 
I'utilisateur, mais elle permet 
surtout, en association avec la 
propriete navigator. appName, 
de connaltre les fonctionnalites 
prises en charge par le 
navigateur de votre visiteur. 

language Renvoie une chaTne de 

caracteres qui correspond a la 
langue utilisee par le navigateur 
du client. Cette propriete n'est 
comprise que par les 
navigateurs prenant en charge 
les versions 1 .2 et superieures 
de JavaScript. 


5.0 (Windows, fr-FR) 
fr-FR 


mimeTypes Renvoie un tableau des types 
MIME pris en charge par le 
navigateur, c'est-a-dire les types 
de fichiers enregistres. 


application/x-shockwave 

-flash, 

application/ future splash, 

application/x-j ava-vm, 

etc. 


platform Renvoie une chaTne de 
caracteres qui indique le 
systeme d'exploitation du client. 
Cette propriete n'est comprise 
que par les navigateurs qui 
prennent en charge les versions 
1 .2 et superieures de 
JavaScript. 

plugins Renvoie la liste des plug-in 
(modules complementaires) 
installes sur la machine cliente. 


Win32 

npnul32.dll, npswf32.dll, 
NPOJI610.dll, 
NPJavall.dll, etc. 
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Tableau 10.4 : Proprietes JavaScript de I'objet navigateur [navigator] 

Propriete Description Exemple 

userAgent Renvoie la chaTne de caracteres Mozilla/5.o (windows, u, 

qui comprend toutes les windows NT 5.1, fr-FR, 

informations sur I'agent rv: 1 . 7 . 8) , 

utilisateur du client. Les Gecko/20050511, 

proprietes ci-dessus offrent un Firef ox/l .0.4 
moyen pratique de recuperer 
une partie de cette information. 



Puisque vous pouvez determiner le type de I'agent utilisateur du client, 
vous etes en mesure de creer un site reellement dynamique, qui oriente 
le visiteur vers des pages concues speciflquement pour I'agent utilisateur 
dont il se sert. Par exemple, en remplacant dans la barre de navigation 

<TD><A href ="accueil .html" target=princ>Accueil</A></TD> 

par ce qui suit : 

<script type="text/ javascript "> 

<! — 

Navigateur = navigator . appName; 

if (Navigateur == 'Netscape') 

{ 

document .write ("<TDXA href=' region_nets . html' "); 

} 

if (Navigateur == 'Microsoft Internet Explorer') 

{ 

document .write ("<TDXA href=' region_IE . html' "); 

} 

document .writeln ("target=princ>Ma région</AX/TD>" 

II— > 

</script> 

Selon le navigateur, la page affichee differe. Vous pouvez ainsi tirer 
profit des caracteristiques propres a chaque navigateur. 



A 



NOSCRIPT 
ATTENTION _,. . . , . , ,. 

Si vous procedez ainsi, vous devnez en pratique placer la hgne 
remplacee dans un element NOSCRIPT, cela arm de prendre en compte 
les navigateurs ne reconnaissant pas les scripts, en ciblant 
eventuellement une page depourvue de tout script : 



<N0SCRIPT> 

<TDXA href="region_sanscript . html" target=princ> 

Ma région</A></TD> 
</NOSCRIPT> 
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JavaScript est un des composants essentiels de la technologie AJAX 
(Asynchronous Javascript And XML). Les applications AJAX ont 
generalement recours a l'objet XMLHTTPRequest (XHR) pour envoyer 
une requete a un script serveur et analyser dynamiquement les resultats 
de ce dernier via DOM. Internet Explorer a ete le premier a proposer ce 
composant, sous forme d'un ActiveX, des la fin des annees 90. Ce n'est 
qu'en 2002 que les developpeurs commencent massivement a l'utiliser, 
vu son adoption dans FireFox. Les versions d'Internet Explorer 
anterieures a la 7 ne geraient pas l'objet XHR tels que decrit dans les 
standards du W3C mais proposaient un controle ActiveX equivalent (a 
partir de la version 5), ce qui impose des fourches dans le code. 

AJAX est une des technologies phares du mouvement Web 2.0 qui 
definit les interfaces riches permettant a l'internaute une plus grande 
interactivite avec la page web. 



ECMAScript 

Comme nous l'avons deja signale, ECMAScript est une tentative de 
normalisation du noyau du langage JavaScript et de ses derives : sa 
syntaxe, ses mots-cles et ses composants natifs. La troisieme edition du 
standard ECMA-262 a ete publiee en decembre 1999 (www 
.ecma-international.org/publications/standards/Ecma-262.htm), mais la 
quatrieme version est en developpement (http://www.ecmascript.org/es4 
/spec/overview.pdf).C'est devenu un standard international (ECMA-262 et 
ISO- 10262), ce qui en fait une des rares technologies Internet « non 
protocole » a avoir obtenu une normalisation d'un organisme officiel : 
meme HTML n' a jamais depasse le stade de Recommandation W3C. 

Le standard ECMAScript definit une syntaxe de programmation proche 
du langage C. Si vous connaissez deja ce langage, vous serez 
rapidement operationnel. 

Si chaque navigateur possede son propre interpreteur de JavaScript, et 
est done susceptible d'etre incomplet et de ne pas comprendre tout ce 
que vous aurez pu coder, les dernieres versions des navigateurs 
modernes prennent en charge dans sa quasi-integralite le standard 
ECMAScript. C'est pourquoi il vaut toujours mieux se reporter a ce 
standard lorsque vous ecrivez un programme en JavaScript. 
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Vous ne pouvez identifier un script ecrit en ECMAScript. En effet, il est 
declare dans du code HTML comme etant de type JavaScript : 

<SCRIPT type ="text/ JavaScript"> 

En pratique done, les termes JavaScript et ECMAScript sont 
pratiquement synonymes, alors qu'ils peuvent recouvrir des differences 
notables. 



VBScript 

VBScript est un langage de script propre a Microsoft, derive du langage 
de programmation Visual Basic. VBScript n'etait pas prevu initialement 
pour devenir un langage de script pour Internet. II est destine aux 
utilisateurs peu techniques, en utilisant largement la syntaxe Visual 
Basic. II est de ce fait parfois plus pratique pour des utilisateurs 
occasionnels. L'experience prouve qu'il suffit d'examiner quelques 
exemples de n'importe quel langage de script pour s'habituer a sa 
syntaxe. 

VBScript reste tres proche de JavaScript, meme s'il emploie une syntaxe 
de ponctuation legerement differente. Les commentaires debutent par 
une apostrophe simple, tandis que certains operateurs ont recours a un 
symbole different : par exemple & au lieu de +. VBScript n'est pas 
sensible a la casse : document .write, document .Write et 
Document .Write sont strictement equivalents. 

Comme pour tout script, votre code doit etre insere dans un element 
SCRIPT, mais avec cette fois, comme valeur de l'attribut type, la 
chaine text/vbscript. Une ligne de commentaire permet de le 
masquer vis-a-vis des anciens navigateurs. Vous pouvez (et devriez) 
egalement avoir recours a un element <N0SCRIPT> arm d'afficher du 
texte ou un lien pour les utilisateurs ne disposant pas de la 
reconnaissance de VBScript. 

Voici un exemple de script VBScript. II se borne a afficher la date 
systeme, exactement comme les fichiers JavaScript date . j s et 
date2 . j s vus precedemment. 

<SCRIPT type="text/vbscript"> 

<! — 

document .write (Day (Now) & " " & MonthName (Month (Now) , False) 

& " " & Year (Now) ) 
' --> 
</SCRIPT> 
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Helas ! Comme le montrent les copies d'ecran des figures suivantes, si 
cela fonctionne parfaitement avec Internet Explorer, ce script reste sans 
effet sous Firefox. 
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Figure 10.16 : 

Test de ce script avec Internet 
Explorer 
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J Figure 10.17 : 

Test de ce script avec 
Firefox. 



II est toutefois une chose que VBScript gere bien mieux que JavaScript : 
ActiveX. Cela n'a rien d'etonnant, car ces deux technologies sont 
signees Microsoft. Un site concu a l'aide de VBScript peut exploiter 
n'importe quel dispositif d' Internet Explorer : e'est le seul navigateur a 
reconnaitre parfaitement a la fois VBScript et ActiveX. Bien 
evidemment, il est a peine necessaire de vous rappeler la necessite de 
prevoir un site alternatif pour les non-utilisateurs de MSIE. 

Si VBScript presente les memes risques globaux de securite que 
n'importe quel script, ce n'est pas le cas d'ActiveX : Internet Explorer 
vous previendra toutefois en principe des risques de certaines actions, ce 
qui vous permet de controler l'innocuite d'un programme avant son 
execution. 
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Traitement de formulaires a I'aide de scripts 

Vous avez vu, dans des exemples precedents, comment valider des 
entrees d'un formulaire a I'aide d'un script avant d'en autoriser la 
soumission. 

Les scripts peuvent egalement agir (et agissent generalement) apres la 
soumission. Lors de la conception de votre formulaire, vous devez 
specifier une action dans l'element FORM. Cette action determine 
l'endroit ou sont envoy ees les donnees et leur traitement. 

II y a communement deux facons de traiter les donnees d'un formulaire. 
L' action la plus facile a utiliser est un formulaire d'envoi de courrier 
electronique : 

<FORM action="mailto:mon_nomph@monFAI . fr" method="POST"> 

Les donnees sont envoyees a mon adresse electronique sous une forme 
relativement illisible en raison du type d'encodage URL, qui a insere 
des caracteres supplementaires avant la transmission au serveur ou 
l'envoi par courrier electronique. Vous avez alors besoin d'un moyen de 
decoder ces donnees. II existe un grand nombre de programmes, dont de 
nombreux disponibles gratuitement (uudecode.com, Sperical 
UUDecode, etc.), qui permettent de decoder aisement ces donnees. 
Essayez simplement une recherche Google avec comme mots-cles 
« uudecode + freeware » ! 

L autre facon de traiter les donnees consiste a employer un script CGI 
(Common Gateway Interface). Un script CGI est un script cote serveur. 
Les scripts CGI peuvent quasiment tout faire avec des donnees de 
formulaire : decoder les resultats et les envoyer a une adresse 
electronique, les ajouter a une base de donnees ou un fichier, chercher 
des informations, modifier un profil d'utilisateur, creer ou envoyer un 
fichier, effacer un fichier ou traiter les donnees comme bon vous semble. 

Plusieurs scripts CGI gratuits sont disponibles sur Internet. La facilite 
d'emploi de ces scripts peut cependant varier. lis sont generalement 
rediges par des independants. Certains scripts ne sont gratuits que pour 
des institutions caritatives et educatives, tous les autres devant payer. En 
general, un bon script CGI coute entre 100 et 300 €. 

Les programmes executes par CGI sont toujours ecrits en langages de 
programmation individuels. La plupart des scripts CGI sont ecrits en 
Perl, C ou C++, meme si tout langage de programmation installe sur le 
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serveur peut etre utilise. C et C++ sont des choix frequents, car de 
nombreux programmeurs sont familiarises avec ce genre de langages. 
Malheureusement, les programmes C doivent etre compiles dans 
quelque chose que l'ordinateur puisse comprendre. Perl est un langage 
tres repandu pour les CGI, car il est petit, rapide et facile a apprendre et 
a utiliser. Contrairement a C, les scripts Perl n'ont pas besoin d'etre 
compiles pour etre executes. Enfin, un grand nombre de bibliotheques 
Perl ont ete creees specifiquement pour gerer les applications CGI. 

Attention, les scripts CGI posent toutefois de nombreux problemes : 

Comme ils sont installes cote serveur, ils en consomment les 
ressources. Cela peut ne plaire que tres moyennement a votre 
hebergeur. 

Ils peuvent presenter de serieux risques securi takes, soit 
volontairement, soit plus frequemment parce qu'ils sont mal 
ecrits : un autre motif qui les rend suspects aux yeux des 
hebergeurs ! 

Pour ces raisons, nombreux sont les hebergeurs qui soit refusent 
totalement 1' installation de tout script CGI, soit, plus rarement, offrent 
eux-memes une palette de scripts severement controles auxquels vous 
devez obligatoirement vous limiter. 



Cookies 

Un cookie est un petit fragment d' information qui reste stocke sur votre 
ordinateur apres la cloture de la connexion. HTTP est un protocole dit 
« sans etat », ou « sans memoire » : chaque requete individuelle envoyee 
au serveur Web est independante des precedentes. Autrement dit, le 
serveur ne dispose d'aucun moyen de savoir que vous venez de 
consulter la page Ma region alors que vous accedez a la page Ma famille. 

Un fichier de cookie est un fichier en texte brut renfermant des cookies. 
Netscape rassemble les cookies dans votre dossier Profit utilisateur. 
Chaque utilisateur possede son propre fichier de cookies, exactement 
comme il dispose de sa propre liste de signets. 

Avec Internet Explorer, les cookies sont stockes dans le dossier 
C:\Windows\Cookie du disque dur. Chaque cookie constitue un fichier 
individuel : en raison de la taille minimale occupee par un fichier, cela 
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peut amener a consommer un espace disque non negligeable. II en va 
d'ailleurs de meme pour la liste des favoris. 

Les utilisateurs ne font generalement pas grand-chose avec leurs 
cookies, et ne sont d'ailleurs pas supposes y toucher. Meme si de 
nombreux utilitaires de gestion des cookies, desormais souvent integres 
aux navigateurs, rendent ceux-ci accessibles a l'utilisateur moyen, le but 
reel des cookies est de fournir certaines informations au serveur Web, 
pour maintenir un etat homogene lors de la navigation sur le Web. 

Les cookies renferment parfois des informations sensibles, comme des 
noms d'utilisateurs ou des mots de passe : le genre de choses qu'il n'est 
guere souhaitable de voir rendues disponibles a tout autre site que celui 
pour lequel elles sont prevues. Rassurez-vous, un cookie ne peut etre lu 
que par le serveur Web qui l'a genere. Si vous possedez un serveur Web 
a l'adresse WWW.mondomaine.com et que vous creez un cookie utilisateur 
contenant le nom et le numero de telephone de l'utilisateur, seuls les 
scripts s'executant sur www.mondomaine.com sont capables de lire ce 
cookie et d'en extraire le numero de telephone. 

Un cookie peut servir a stocker des informations saisies par l'utilisateur 
dans un formulaire Web ou tout autre peripherique d'entree en ligne. II 
peut aussi memoriser des comportements, comme les liens hypertextes 
suivis ou les images affichees. Cela permet au responsable du site de 
cibler sa publicite, d'evaluer l'efficacite des differents dispositifs de 
navigation et d'identifier les sujets qui retiennent l'attention des 
visiteurs. 

Malgre leur potentiel et en depit de certaines idees recues, les cookies 
restent limites. lis ne peuvent executer un programme situe sur votre 
disque dur, telecharger ou installer un virus, imposer a votre ordinateur 
d'envoyer un message electronique a votre insu, lire un element non 
volontairement fourni par l'intermediaire d'un formulaire Web ou, d'une 
facon plus generale, provoquer une quelconque modification de votre 
systeme. Un cookie stocke une information elementaire dans un endroit 
precis de votre disque dur : le fichier cookies.txt avec Netscape, le 
dossier C:\Windows\Cookies avec Internet Explorer. C'est tout. 
L information qu'il renferme ne peut venir que du serveur Web, a l'aide 
de donnees transmises via un formulaire Web ou tout autre dispositif de 
saisie en ligne. 

En outre, un utilisateur peut choisir d' accepter ou de refuser les cookies. 
Par exemple, pour ce faire, avec Firefox, choisissez Outils > Options. 
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Selectionnez Vie privee dans le volet de gauche, developpez la section 
Cookies et decochez 1' option Autoriser les sites a creer des cookies. 
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Figure 10. 18 : Controle des cookies avec Firefox 

Vous pouvez parametrer Firefox arm qu'il vous demande si vous 
souhaitez accepter un cookie. 



Le site www.netscape.com veut definir un deuxieme cookie. 

Appliqu .i ■ . hoix | !■'."■■■■ '■■ ■ ■ ib 

Affriher les details fiytoriser Autoriser durant la session Interdire 



Figure 10.13 : 

Invite d'acceptation de cookie de 
Firefox 



Avec Internet Explorer, choisissez Outils > Options Internet. Cliquez sur 
l'onglet Confidentiality, puis cliquez sur Avancees. Dans la fenetre qui 
s'affiche, selectionnez les options adequates. 
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Figure 10. SO : 

Controle des cookies avec Internet 
Explorer 
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Vous pouvez creer un cookie a l'aide de code HTML pur, a l'aide d'un 
element META et d'un en-tete http ou a l'aide de l'attribut HTTPEQUIV. 

<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx; 
expires=Saturday, 31-Dec-05 23:59:59 GMT; path=/"> 

Cela n'offre toutefois qu'un interet relatif, car tout y est code « en dur », 
tandis que le bon fonctionnement n'est garanti qu'avec Netscape. 



HTTP-EQUIV 

Nous evoquons ici 1 attnbut HTTP-EQUIV d un element META. Un 
element meta dote d'un attribut http-EQUIV equivaut a un en-tete 
HTTP. II sert a controler Faction des navigateurs et peut permettre de 
modifier ou de preciser les informations fournies par les vrais en-tetes. 
Ces elements devraient avoir un effet identique qu'ils soient sous cette 
forme ou qu'ils soient specifies comme en-tetes HTTP. Certains serveurs 
les traduisent automatiquement en vrais en-tetes HTTP. Les en-tetes 
HTTP sont generalement supplantes par les instructions HTML 
correspondantes et sont parfois interpreted de facons differentes par les 
serveurs. Nous avons done prefere les laisser de cote. Reportez-vous 
pour plus d' informations a la specification HTTP (RFC 2616, www.ietf.org 
/rfc/rfc2616.txt). 



Mieux vaut done avoir recours a un petit programme JavaScript, comme 
celui-ci : 

Listing 10-3 : fonction Set Cookie 

function Set_Cookie ( nom, valeur, expiration, pathname, 

mondomaine, secure ) 
{ 

// Definition de la date/heure exprimee en milliseconds 
var today = new Dated; 
today. setTime ( today .getTime () ); 

/* 

Si la variable expiration est definie, calculer la date 
d' expiration exacte . Elle est exprimee ici en jours 
*/ 

if ( expiration ) 
{ 

expiration = expiration * 1000 * 60 * 60 * 24; 
} 

var date_expiration = new Date ( today . getTime ( ) 
+ (expiration) ) ; 

document . cookie = nom + "=" tescape ( valeur ) + 
( ( expiration ) ? " ; expiration=" 
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+ date_expiration.toGMTString() : "" ) + 
( ( pathname ) ? ";pathname=" + pathname : "" ) + 
( ( mondomaine ) ? ";mondomaine=" + mondomaine : " 
( ( secure ) ? "/secure" : "" ); 



Le cookie est pret. Dans la plupart des cas, seuls les quatre premiers 
parametres doivent etre fixes (nom, valeur, expiration et 
nom path). Si le cookie ne doit etre disponible que dans un dossier, 
ajoutez comme variable nompath ' /nomdossier/' pour indiquer 
au script de definir ce cookie uniquement pour ce chemin et non pour la 
totalite du domaine. En general toutefois, vous donnerez a la variable 
path la valeur '/', la racine de votre site Web. 'mondomaine' et 
' secure' n'ont generalement pas besoin d'etre specifies, sauf dans des 
buts tres precis. 

Vous creez reellement le cookie en invoquant cette fonction : 

Set_Cookie ( 'moncookie', '9', 30, '/', ", " );. 

Cette ligne de code cree un cookie nomme moncookie, dont la valeur 
est 9 et la date d'expiration fixee a 30 jours de sa creation, valides pour 
la totalite du site. 

Veillez a toujours faire figurer le nombre correct de parametres, les 
parametres non specifies etant places entre apostrophes vides. Un 
nombre incorrect de parametres entraine une erreur du code. 

Creer un cookie est parfait, mais pouvoir le lire serait encore mieux. 
Voici comment proceder : 

Listing 10-4 : fonction Get Cookie 

// cette fonction recupere le cookie s'il existe 
function Get_Cookie ( nom ) { 

var debut = document . cookie . indexOf ( nom + "=" ); 

var longueur = debut + nom. length + 1; 

if ( ( Idebut ) && 

( name != document . cookie . substring ( 0, nom. length ) ) ) 

{ 

return null; 

} 

if ( debut == -1 ) return null; 

var fin = document . cookie . indexOf ( ";", len ); 

if ( fin == -1 ) fin = document . cookie . length; 

return unescape ( document . cookie . substring ( longueur, fin ) ); 
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Vous pouvez ensuite employer cette fonction comme suit : 

if ( Get_Cookie ( 'moncookie' ) ) faire quelque chose 

« Parfait », direz-vous, mais a quoi cela peut-il done servir ? Eh bien, 
que penseriez-vous de pouvoir accueillir de facon personnalisee les 
visiteurs de votre site, en indiquant le nombre de leurs visites sur le 
site? 

Pour ce faire, vous allez ecrire un petit (!) programme JavaScript. 
Attention, si vous le saisissez reellement, faites-le sans les numeros de 
ligne ! 

Listing 10-5 : passage.js 

01 // Passage.js 

02 var username = get_Cookie ( ' username' ) ; 

03 if (username == null ) { 

04 username = prompt ( 'Merci de bien vouloir taper votre 

nom ou votre pseudo ',""); 

05 if (username == null) { 
6 username="vous"; 

07 } else { 

8 pathname = location. pathname; 

09 myDomain = pathname . substring (0, 

pathname. last IndexOf (' /' ) ) +' /' ; 

10 // definir la date d' expiration a un an . 

11 var largeExpDate = new Date (); 

12 largeExpDate . setTime (largeExpDate . getTime ( ) 

+ (365 * 24 * 3600 * 1000) ) ; 

13 } 

14 set_Cookie ( ' username' , username, largeExpDate, myDomain) ; 

15 ) 
16 

La ligne 2 defmit une variable username, dont la valeur est specifiee 
comme egale a celle du champ username de la fonction get Cookie. 
Celle-ci n'est pas encore definie, mais il est classique dans un 
programme JavaScript de placer les definitions des fonctions a la fin du 
programme. 

Si le nom d'utilisateur est vide (test de la ligne 3), la ligne 4 ouvre une 
boite de dialogue invitant l'utilisateur a saisir son nom ou son pseudo. 
Comme l'utilisateur peut parfaitement refuser de saisir son nom en 
refermant la boite d'invite, les lignes 5 a 6 gerent ce cas en attribuant a 
la variable username la valeur vous, puis saute a la ligne 13, qui 
marque la fin de cette instruction conditionnelle. 
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Si l'utilisateur a renseigne son nom ou pseudo, les lignes 7 et 8 
specifiers respectivement les valeurs des variables pathname et 
monDomaine. Les lignes 9 a 11 calculent la date d'expiration en 
ajoutant 365 jours a la date systeme. La ligne 12 cree un cookie a partir 
des differentes valeurs renseignees ou calculees. Enfin, les lignes 13 et 
14 referment les deux instructions conditionnelles. Un cookie qui 
contient le nom de l'utilisateur est alors cree (ou recree). 

Voici maintenant les fonctions du programme. Vous reconnaitrez : 
getCookie (lignes 25 a 40) et setCookie (lignes 42 a 55), un peu 
modifiees par rapport aux precedentes ; une fonction utilitaire, 
getcookieVal (lignes 17 a 23, qui extrait une portion du cookie en 
fonction d'un parametre de decalage (offset) ; et enfin la fonction 
message (lignes 57 a 60). 

17 function get_CookieVal (offset) 

18 { 

19 var endstr = document . cookie . indexOf (";", offset); 

20 if (endstr == -1) 

21 endstr = document . cookie . length; 

22 return unescape (document . cookie . substring (of f set, endstr)); 

23 ) 
24 

25 function get_Cookie (name) 

26 { 

27 var arg = name + "="; 

28 var alen = arg. length; 

29 var clen = document . cookie . length; 

30 var i = 0; 

31 while (i < clen) { 

32 var j = i + alen; 

33 if (document . cookie . substring (i, j) == arg) 

34 return get_CookieVal (j); 

35 i = document . cookie . indexOf (" ", i) + 1; 

36 if (i == 0) 

37 break; 

38 ) 

39 return null; 

40 ) 
41 

42 function set_Cookie (name, value) 

43 { 

44 var argv = set_Cookie . arguments; 

45 var argc = set_Cookie . arguments . length; 

46 var expires = (argc > 2) ? argv[2] : null; 

47 var path = (argc > 3) ? argv [3] : null; 

48 var domain = (argc > 4) ? argv[4] : null; 

49 var secure = (argc > 5) ? argv[5] : false; 

50 document . cookie = name + "=" + escape (value) + 

51 ((expires == null) ? "" : ("; expires=" + 
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52 expires. toGMTString () ) ) + ((path == null) ? "" : ("; 
X path=" + 

53 path) ) + ( (domain == null) ? "" : ("; domain=" + 
2* domain) ) + 

54 ((secure == true) ? "; secure" : ""); 

55 ) 
56 

57 function messaged) 

58 document .write ("Bonjour "+ username + " ! Cela fait " + 
X visites + 

59 " fois que vous visitez notre site"); 

60 ) 
61 

Nous n'entrerons pas dans le detail de ces fonctions, car cela risquerait 
de nous emmener trop loin. Pour terminer le script, saisissez ce qui suit : 

62 var expdate = new Date ( ) ; 

63 var visites; 

64 // definir la date d' expiration a un an . 

65 expdate. setTime (expdate. getTime () + (24 * 60 * 60 * 1000 * 
3* 365) ) ; 

66 if (! (visites = get_Cookie ("visites") ) ) 

67 visites = 0; 

68 visites++; 

69 set_Cookie ("visites", visites, expdate, "/", null, false); 

70 username = username . toUpperCase () ; 

71 message ( ) ; 

Vous deflnissez la date d'expiration et incrementez la variable compteur 
visites, puis creez le cookie nomme visites. La ligne 79 convertit 
par securite la variable username en majuscules, arm d'eviter toute 
erreur de casse, tandis que la derniere ligne invoque la fonction 
message. Enregistrez ce nchier sous le nom passage.js. 

1 Ouvrez maintenant dans le Bloc-Notes le nchier accueil.html. 

2 Enregistrez-le sous le nom accueil_3_10_3.html, puis modiflez son 
numero de version : 

<META name="version" content="3 . 10 . 4"> 

3 Pour invoquer votre programme JavaScript, placez ce qui suit 
juste apres 1' element H2 : 

<P><SCRIPT type="txt/ JavaScript" src="passage . j s"> 
message () ;</SCRIPT> 

4 Enregistrez votre fichier sous le nom accueil.html, puis ouvrez 
index.html dans votre navigateur. 

Vous voyez d'abord apparaitre la boite de dialogue d'invite. 



LE GUIDE COMPLET 423 



Scripts 



Eagganan 



£ "i Merci de bien vouloir taper votre nom ou votre pseudo 



Figure 10.21 : 

Invite de saisie du nom d'utilisateur 



Saisissez (ou non) un nom, fermez la boite de dialogue : un message de 
bienvenue s'affiche a l'ecran. 

Si vous cliquez sur le bouton RafraTchir (ou Actualiser) de votre 
navigateur, le cookie username est lu, le compteur de visites est 
incremente et le message se modifie : il en sera de meme a chaque visite. 
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Figure 10.22 : 

Le compteur de visites 
est incremente a 
chaque passage sur la 
page 

A partir de ce script, il serait facile de modifier le message en fonction 
du nombre de visites ou d'apres des noms d'utilisateurs specifiques. 
Attention toutefois a ne pas placer ainsi des donnees confidentielles, car 
il est facile d'acceder au fichier passage.js et d'examiner son contenu. 

Vous venez de decouvrir la puissance des cookies, limitee toutefois par 
la possibility qu'ont les utilisateurs de les refuser. Examinons 
maintenant un autre outil frequemment employe, les applets. 



10.5. Applets 



Le lancement de Java par Sun Microsystems en 1995 a fait l'effet d'une 
bombe. Tout le monde voulait soudainement du Java sur son site. 
Celui-ci servait a resoudre des problemes alors que cela n'etait pas du 
tout son but initial. 
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La popularite de Java tenait a ce qu'il pouvait accomplir deux choses 
dont etait jusque-la incapable le Web. Vous pouviez tout d'abord 
concevoir des applications compatibles quelle que soit la plate-forme 
consideree, executables sur le Web en temps reel. II constituait ensuite 
un moyen dynamique de controle et de manipulation de donnees Web, 
toujours en temps reel. 

L'HTML dynamique a tres temporairement perturbe Java. II permet lui 
aussi la manipulation en temps reel de contenus Web, tout en etant 
charge plus rapidement. DHTML n'est toutefois encore que peu 
compatible entre les navigateurs, sans meme evoquer des architectures 
differentes. 

Les applets Java etant partiellement compilees, vous ne pouvez en 
examiner le code comme avec HTML, JavaScript ou VBScript. Cela est 
capital pour les developpeurs Java desireux de proteger leur code. Le 
tableau suivant rappelle les principales differences entre JavaScript et 
Java. 



Tableau 10.5 : Differences entre JavaScript et Java 


JavaScript 


Java 


Langage interprets 

Code integre au HTML 
[eventuellement via un fichier 
externe) 


Langage pseudo compile 
(chargement d'une machine 
virtuelle] 

Code (applet] a part du document 
HTML, appele a partir de la page. 


Langage peu type 


Langage fortement type 
(declaration du type de variable] 


Liaisons dynamiques : les references 
des objets sont verifiees au 
chargement 

Accessibility du code 


Liaisons statiques : les objets 
doivent exister au chargement 
(compilation] 

Confidentialite du code 


Sur : ne peut pas ecrire sur le 
disque dur 


Sur : ne peut pas ecrire sur le 
disque dur 



Remarquez que si une applet Java (le programme) est prealablement 
compilee, une machine virtuelle permettant d'interpreter le pseudo code 
doit etre chargee en memoire (du cote du client) a chaque chargement de 
la page, d'ou un important ralentissement pour les applets Java par 
rapport au JavaScript. 
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Les failles originelles de Java autorisaient la manipulation et la 
modification de fichiers sur votre disque dur. Sun a rapidement remedie 
au probleme, mais comme les applets Java peuvent desormais demander 
et obtenir des droits d'acces supplementaires, des applets provenant de 
sources indelicates sont susceptibles de contenir des virus et des 
programmes « douteux » : soyez prudents avec les applets Java. Mieux 
vaut generalement les desactiver dans votre navigateur. 

Cette attitude etant conseillee, elle diminue l'interet des applets Java 
dans vos pages HTML. 

HTML permet d'integrer une applet dans votre page Web. II ne s'agit 
toutefois pas obligatoirement d'une applet Java : ce peut etre une applet 
Python, Perl, etc. L'inclusion d'une applet s'effectuait autrefois a l'aide 
de l'element APPLET, desormais deconseille au profit de l'element 
OBJECT. Voici un exemple de code HTML d'insertion d'une applet a 
l'aide de l'element APPLET : 

<APPLET code="nomclasse. class" width="100" height="100"x/APPLET>. 

La valeur de l'attribut code est le nom de la classe Java qui sert de 
fichier principal de l'applet elle-meme. Dans l'element APPLET, vous 
pouvez placer un ou plusieurs parametres dans des elements PARAM. 
Ceux-ci indiquent a l'applet les variables et controles qu'elle doit 
utiliser. La plupart des bonnes applets que vous pouvez telecharger et 
utiliser gratuitement possedent des commentaires relatifs aux variables 
et parametres que vous pouvez et devriez utiliser. 



Element OBJECT 

Desormais, vous devez preferer l'element OBJECT : 

<OBJECT codetype=" application/ j ava" classid="nomclasse . class "></OBJECT> 

Le tableau suivant presente les principaux attributs de l'element 

OBJECT. 



Tableau 10.B 


Attributs classiques de /'element OBJECT 


Attribut 


Valeur 


Description 


classid 


uri 


Sert a specifier la localisation de 
I'implementation d'un objet via un URI. Peut 
etre employe simultanement ou en alternative 
avec l'attribut data, selon le type de I'objet 
implique. 
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Tableau 10.G : Attributs classiques de /'element OBJECT 


Attribut Valeur 


Description 


codebase 


uri 


Specifie le chemin de base utilise pour 
resoudre les URI relatifs specifies par les 
attributs classid, data et archive. Sa valeur 
par defaut est I'URI de base du document 
courant. 


codetype 


type-de-contenu 


Specifie le type de contenu des donnees 
attendues lors du chargement de I'objet 
specifie par I'attribut classid. Facultatif, il est 
toutefois recommande lorsque I'attribut 
classid est specifie : il permet a I'agent 
utilisateur d'eviter le chargement 
d'informations de type non reconnu. Sa valeur 
par defaut est celle de I'attribut type. 


data 


uri 


Peut etre utilise pour specifier la localisation 
des donnees de I'objet (par exemple les 
donnees d'images] ou, plus generalement, la 
forme serialises d'un objet qui peut etre 
utilisee pour recreer cet objet. Quand il est 
donne comme URI relatif, celui-ci devrait etre 
interprets relativement a I'attribut codebase. 


type 


type-de-contenu 


Specifie le type de contenu des donnees 
specifiees par I'attribut data. Facultatif, mais 
recommande quand I'attribut data est 
specifie : il permet a I'agent utilisateur d'eviter 
le chargement des informations a type de 
contenu non reconnu. Si la valeur de cet 
attribut differe de I'en-tete HTTP 
Content-Type renvoye par le serveur quand 
I'objet est ramene, c'est I'en-tete HTTP 
Content-Type qui a preseance. 


archive 


liste-uri 


Sert a specifier la liste des URI, separes par 
des espaces, des archives contenant les 
ressources qui concernent I'objet. Cette liste 
peut inclure les ressources specifiees par les 
attributs classid et data. Le prechargement 
des archives diminue generalement le temps 
de chargement des objets. Les archives 
specifiees comme URI relatifs devraient etre 
interpreters relativement a I'attribut 
codebase. 


declare 




Quand il est present, cet attribut booleen fait 
de la definition de I'element object courant 
seulement une declaration. L'objet doit etre 
instancie par la suite au travers d'une 
definition object qui se refere a cette 
declaration. 


standby 


texte 


Specifie le messaqe que I'aqent utilisateur 
peut restituer pendant le enlargement de 
['implementation et des donnees de I'objet. 



LE GUIDE COMPLET 427 



Scripts 



Voici un exemple d' insertion d' applet d'horloge analogique dans un 
document via l'element OBJECT. L' applet, ecrit dans le langage Python, 
ne requiert aucune donnees supplementaires ni valeurs d'execution. 
L'attribut class id specifie la localisation de 1' applet : 

<PxOBJECT classid="http: //www.miamachina . it/orologioanalogico.py"> 
</OBJECT> 

Remarquez que l'horloge sera restituee des 1' interpretation de la 
declaration de l'element OBJECT par l'agent utilisateur. II est possible de 
differer la restitution d'un objet en effectuant une declaration prealable 
de cet objet. 

Mieux vaut toujours ajouter a un tel element un texte de remplacement, 
au cas ou l'agent utilisateur ne puisse pas restituer l'horloge. 

<PxOBJECT classid="http: //www.miamachina . it/orologioanalogico .py"> 

Une horloge animé e . 

</OBJECT> 

Une des grandes forces de l'element OBJET est, comme nous l'avons vu 
dans le Chapitre 6 traitant des images, la possibilite de specifier des 
restitutions alternatives de l'objet : chacune des declarations des 
elements OBJECT imbriques peut specifier un type de contenu alternatif. 
Si l'agent utilisateur ne peut pas restituer l'element OBJECT le plus 
externe, il essaye d'en restituer le contenu, qui peut etre un autre 
element OBJECT, etc. Souvenez-vous de l'exemple alors presente : 

<TD rowspan="3"> 

<!-- Essayer d'abord un applet en Python --> 
<OBJECT title="Coucher de soleil sur le lac de Linciel" 
classid="Linciel .py"> 

<!-- Sinon, essayer 1' animation MNG --> 
<OBJECT data="Linciel .mng" type="application/mng"> 
<!-- Sinon, essayer 1' image JPEG --> 
<OBJECT data="Images/coucher de soleil.jpg" 
type="image/gif " width="267" height="200" 
title="Un coucher de soleil sur le lac de Linciel"> 
<!-- Sinon, le texte en dernier recours --> 
Coucher de soleil sur le lac de Linciel 
</OBJECT> 
</OBJECT> 
</OBJECT> 
</TD> 

L'agent utilisateur essaye d'abord de restituer le premier element 
OBJECT possible, dans l'ordre suivant : 

1 Une applet ecrite en langage Python. 
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2 Une animation MNG du coucher de soleil. 

3 Une image JPG de celui-ci. 

4 Un texte de remplacement. 

La declaration la plus externe specifie une applet qui ne requiert ni 
donnees ni valeur initiales. La deuxieme declaration specifie une 
animation MNG. Comme elle ne definit pas la localisation d'une 
implementation pour traiter 1' animation MNG, elle compte sur 1' agent 
utilisateur pour la prendre en charge. La troisieme declaration specifie la 
localisation d'un fichier JPG et fournit un texte de remplacement au cas 
ou tous les autres mecanismes auraient echoue. 

Les donnees a restituer peuvent etre fournies de deux facons : en interne 
ou a partir d'une ressource externe. La premiere methode est 
generalement plus rapide, mais ne convient pas pour une grande quantite 
de donnees. 

Voici un exemple d'emploi de donnees internes dans l'element 

OBJECT : 

<P> 

OBJECT id="horlogel" 

classid="clsid:663C8FEF-lEF9-HCF-A3DB-0 80 03 6F12502" 
data="data:application/x-oleobject;base64, . . .des 
S< données en base64..."> 
Une horloge. 

</OBJECT> 



Element PARAM 

Pour initialiser un element, vous avez recours a un ou plusieurs elements 
PARAM. Cet element ne possede qu'une balise d'ouverture. 

Les elements PARAM specifient 1' ensemble des valeurs necessaires a 
l'execution d'un objet. Un element OBJECT (ou APPLET) peut posseder 
un nombre quelconque d'elements PARAM dans n'importe quel ordre. lis 
doivent toutefois etre situes au debut du contenu de l'element OBJECT 
(ou applet). 

La syntaxe des noms et de leurs valeurs est censee etre comprise par 
1' implementation de l'objet. La specification ne definit pas les facons 
selon lesquelles les agents utilisateurs devraient ramener les couples 
nom/valeur ni interpreter les noms en doublon. 
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L'attribut name definit le nom d'un parametre d'execution cense etre 
connu des objets inseres. La sensibilite a la casse de la propriete depend 
de 1' implementation specifique de l'objet. 

L'attribut value specifie la valeur d'un parametre d'execution specifie 
par l'attribut name. Les valeurs de propriete n'ont aucune signification 
pour HTML : leur signification est determined par l'objet en question. 

L'attribut valuetype specifie le type de l'attribut value. Les valeurs 
possibles sont : 

data : c'est la valeur par defaut. Signifie que la valeur specifiee 
par value sera evaluee puis transmise a 1' implementation de 
l'objet sous forme d'une chaine. 

ref : la valeur specifiee par l'attribut value est un URI qui 
designe une ressource dans laquelle les valeurs d'execution sont 
stockees. L'URI doit etre transmise a l'objet tel quel (non resolu). 

ob j ect : la valeur specifiee par l'attribut value est un identifiant 
qui se refere a la declaration d'un element OBJECT situe dans le 
meme document. L' identifiant doit etre la valeur de l'attribut id 
de l'element OBJECT declare. 

L'attribut type specifie le type de contenu de la ressource designee par 
l'attribut value uniquement lorsque l'attribut valuetype possede 
comme valeur ref. Cet attribut indique done a l'agent utilisateur le type 
des valeurs situees a l'URI designe par l'attribut value. 



A 



OBJECT et EMBED 

UN 

Microsoft Internet Explorer reconnait l'element object a partir de sa 
version 3.0, Netscape a partir de sa version 4. Ce dernier prenait 
egalement en charge l'element EMBED qui lui etait propre. Vous devriez 
desormais n'employer que object. 

Voici un exemple d'emploi de ces deux elements, qui tient compte du 
navigateur : 

Listing 10-6 : Elements OBJECT et EMBED 

<0BJECT classid="clsid: numericID" codebase=" . . /" 

width="largeur" height="hauteur" id="nom"> 
<PARAM name="src" value="nomf ichier . dcr"> 
<PARAM name="bgcolor" value="couleurfond"> 
<PARAM name="palette" valeur="fond"> 
<! — Netscape 2.0 et 3.0 ont recours a EMBED — > 
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<EMBED width="largeur" height="hauteur" src="nomf ichier .dcr" 

1 T II T -C III 

bgcolor—' couleur fond 

pluginspage="http: //www. macromedia . com/ Shockwave /download/" 

s tar t=" true" alt="Shockwave"> 

<NOEMBED> Si vous ne disposez pas de Shockwave, vous pouvez 

le té lé charger 
<A HREF=http: //www. macromedia. com/shockwave/download/> ici 
</A> 

pour voir cette animation. 
</NOEMBED> 
</OBJECT> 

Un utilisateur qui possede un navigateur ne reconnaissant ni object 
ni embed voit le contenu de l'element noembed. Remarquez que les 
elements object et noembed doivent posseder une balise de fermeture, 
contrairement a embed. Desormais, vous devriez toutefois n'employer que 

OBJECT. 



Declaration et instanciation des objets 

Nous avons signale plus haut qu'il etait possible de separer la 
declaration d'un objet de ses instanciations. Cela presente plusieurs 
avantages : 

Les donnees peuvent etre ramenees du reseau par 1' agent 
utilisateur une seule fois (lors de la declaration) et reutilisees pour 
chaque instanciation. 

II est possible d'instancier un objet a partir d'un autre endroit que 
celui de la declaration de l'objet, par exemple a partir d'un lien. 

II est possible de specifier des objets comme etant des donnees 
d'execution d'autres objets. 

Pour declarer un objet de sorte qu'il ne soit pas execute au moment ou 
l'agent utilisateur le lit, il faut placer l'attribut booleen declare dans 
l'element OBJECT et identifier cette declaration en affectant une valeur 
unique a son attribut id. Les instanciations ulterieures de l'objet se 
refereront a cet identifiant. Un element OBJECT declare doit apparaitre 
dans le document avant la premiere instance de cet element OBJECT. 

Un objet defini avec l'attribut declare est instancie chaque fois qu'un 
element qui se rapporte a cet objet requiert une restitution de celui-ci 
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(par exemple, un lien qui se refere a l'objet est active, un autre objet qui 
s'y refere est active, etc.). 

Les agents utilisateurs qui ne reconnaissent pas l'attribut declare 
doivent restituer le contenu de la declaration de l'element OBJECT. 

L'element OBJECT est aussi precieux que complexe. Pour en savoir 
plus, reportez-vous a la specification HTML 4.01. 



10.6. Resume 

Un script est un programme ecrit dans un langage de 
programmation particulier. 

II existe deux types de script : les scripts cote serveur et les scripts 
cote client. Les scripts cote serveur sont situes et s'executent 
comme leur nom l'indique sur le serveur et peuvent envoyer un 
resultat vers la machine cliente. Les scripts cote client sont des 
programmes qui peuvent accompagner le document HTML ou 
bien y etre directement incorpores. lis s'executent sur la machine 
cliente (preservant ainsi les ressources du serveur). 

Un script a action unique est execute une seule fois, lors du 
chargement du document par 1' agent utilisateur. II apparait dans le 
document a l'interieur d'un element SCRIPT. 

Un script repetitif est execute chaque fois que se produit un 
evenement particulier. 

Vous inserez un script dans un document a l'aide de l'element 

SCRIPT. 

HTML ne depend pas d'un langage de script particulier. Les 
auteurs des documents indiquent explicitement aux agents 
utilisateurs le langage de chaque script. Vous pouvez le faire a 
l'aide d'une declaration META placee dans l'element HEAD ou en 
defmissant l'attribut type de l'element SCRIPT. 

L'element NOSCRIPT permet de fournir un contenu de 
remplacement lorsque, pour une raison quelconque, un script 
n'est pas execute. 

II est possible d'associer une action a un certain nombre 
d'evenements intrinseques qui se produisent lorsque l'utilisateur 
interagit avec 1' agent utilisateur. Chacun des evenements prend 
comme valeur un script. 



432 LE GUIDE COMPLET 



Resume 



JavaScript est historiquement le premier langage de script pour le 
Web qui a permis aux developpeurs Web d'executer de petits 
programmes sur le navigateur Web plutot que sur le serveur Web. 
JScript est un langage de script tres similaire developpe par 
Microsoft. 

Le bon fonctionnement de JavaScript dependait largement du 
navigateur employe. Un standard a ete defini pour normaliser les 
langages de script de type JavaScript, ECMA-262 aussi appele 
ECMAScript. C'est devenu un standard international (ECMA-262 
et ISO- 10262), ce qui en fait une des rares technologies Internet 
« non protocole » a avoir obtenu une normalisation d'un 
organisme officiel. 

VBScript est un langage de script propre a Microsoft, derive de 
leur langage de programmation Visual Basic. 

Un script CGI (Common Gateway Interface) est un script cote 
serveur. Ces scripts, souvent employes pour le traitement distant 
des formulaires, posent toutefois de nombreux problemes. 

Un cookie est un petit fragment d' information qui reste stocke sur 
votre ordinateur apres la cloture de la connexion. Les utilisateurs 
peuvent choisir d' accepter ou de refuser les cookies. 

HTML permet d'integrer une applet dans votre page Web. II ne 
s'agit toutefois pas obligatoirement d'une des celebres applets 
Java : ce peut etre une applet Python, Perl, etc. L' inclusion d'une 
applet s'effectuait autrefois a l'aide de l'element APPLET, 
desormais deconseille au profit de l'element OBJECT. 
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Publication sur le Web 



Au fil des chapitres precedents, vous avez decouvert les principaux 
composants du langage HTML et avez construit un site Web 
minimaliste. Vous disposez toutefois desormais des connaissances 
necessaires pour l'ameliorer plus avant, grace aux differentes techniques 
abordees. 

Pour le moment, satisfait de votre premiere realisation, vous souhaitez la 
placer sur le Web, pour qu'elle puisse y etre consulte par tous. Par tous ? 
Vraiment ? Probablement pas. Tout site s'adresse a un public potentiel 
plus ou moins cible. Pour un site d'entreprise, dont le but est de 
promouvoir et de vendre un produit ou un service, la cible se compose 
des clients potentiels, ou du moins de ceux d'entre eux qui emploient 
Internet. Des le debut de la phase de conception de votre site, vous 
devez garder a l'esprit les caracteristiques de la cible visee et pour ce 
faire identifier votre public. 

Ce public identifie, vous devrez probablement adapter votre site en 
fonction de ses demandes ou habitudes particulieres. 

Vous devrez ensuite ameliorer l'accessibilite de votre site, pour tenir 
compte des personnes souffrant de divers handicaps, et eventuellement 
le rendre disponible en plusieurs langages. Enfin, vous le placerez sur le 
Net a l'aide d'un des multiples outils disponibles et le testerez a l'aide 
du plus grand nombre possible de navigateurs. 

Ce chapitre s'interesse a l'ensemble de ces demarches. 

Elements et attributs abordes dans ce chapitre : 

IMG, alt 

TABLE, summary, TH, TD, TR, headers, scope, abbr 

NOFRAME 

OBJECT, EMBEB, NOEMBED 

lang, dir, BDO, dir, META, charset 



11.1. Identification du public 



L'identification des visiteurs probables d'un site Web est capitale. 
Nombreux sont les auteurs Web a commencer sans idee aucune de leur 
public potentiel. lis se contentent d' assembler quelques idees, des 
elements qui leur ont plu, generalement simplement pour apprendre a 
coder en HTML. Sans le savoir, leurs pages possedent cependant un 
public : ceux qui partagent leurs themes d'interet (ceux qui figurent sur 
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les pages Web), ainsi que ceux qui possedent une configuration 
materielle et logicielle identique a celle du concepteur. 

La composante fondamentale d'un site Web est 1' information que vous 
tenez a partager. Le plus important est sans doute de savoir avec qui 
vous allez la partager. Ne surestimez pas le pouvoir d'un message cible. 
Internet est desormais trop vaste et trop diversifie pour garantir que vous 
serez capable d'atteindre tout le monde. 

De toute evidence, le public le plus facile a cibler est celui d'un intranet 
d'entreprise. Le ou les navigateurs employes sont connus, ce qui 
simplifie grandement le codage. En revanche, de tels sites ne brillent 
generalement pas par 1' innovation : ils sont essentiellement informatifs 
et destines a aider les salaries a accomplir leur travail. 

Si votre site s'adresse a des enfants, privilegiez les graphismes et les 
icones significatives au texte. Les enfants preferent des images claires et 
colorees et sont souvent capables de comprendre le but d'une icone sans 
avoir a lire le texte. 
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Figure 11.1 : Un site destine aux enfants insiste sur les icones et les images 

En revanche, si le site concerne plutot des personnes agees (une 
population en forte croissance sur Internet), veillez a ce qu'il puisse 
s'adapter aux deficits visuels, ainsi qu'aux utilisateurs ayant du mal a 
utiliser le clavier ou la souris. 
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Figure 11. 2 : Le site de la FIDEV propose des versions adaptees aux 
personnes souffrant de deficits visuels 

Par contraste, si votre cible est constitute de hard gamers, ces fous de 
jeux video, vous pouvez presumer sans grand risque d'erreur qu'ils 
disposent d'un ecran de grande taille, d'une carte graphique 
performante, des derniers codecs, et probablement d'une liaison Internet 
a haut debit : dans un tel cas, pas question d'hesiter a abuser des images 
et videos ! 

Mais si vous suspectez que meme un seul epileptique sensible a la 
lumiere est susceptible de visiter votre site, oubliez les animations 
spectaculaires et les clignotements repetitifs. Vous devez en effet 
desormais tenir compte des personnes souffrant de handicaps et proposer 
des alternatives pour votre site. Aujourd'hui, de nombreux utilisateurs 
surfent sur le Web sans souris. lis transmettent les ordres a l' agent 
utilisateur a l'aide du clavier ou de commandes vocales. La prise en 
compte de ces utilisateurs porte le nom d' « accessibilite du site ». 



1 1 .2. Accessibilite 

L'ordinateur est un outil precieux, parfois indispensable a de nombreux 
utilisateurs qui souffrent de handicaps. II procure l'acces a la 
communication et a l'enseignement independamment des capacites 
physiques. Internet a permis en outre la realisation de veritables postes 
de travail virtuels. Qu'il s'agisse de recherche ou de courrier 
electronique, l'ordinateur aide les personnes handicapees a agir de facon 
interactive avec leur collegues, leurs amis et leur famille a un degre 
inimaginable dans le passe. 

II est de notoriete publique que la population des seniors croit 
regulierement. Ceux-ci s'interessent en outre de plus en plus a 
l'informatique, essentiellement grace a Internet. Cette nouvelle vague 
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d'utilisateurs decouvre toutefois que l'ecran n'est pas toujours facile a 
lire et que la souris constitue un outil malcommode pour quelqu'un 
souffrant d'arthrite ou d'une quelconque affection du poignet. En tant 
que concepteur d'un site Web, vous ne devez ignorer aucune des parties 
de votre public potentiel. 

Ayant determine qui va acceder a votre site, concevez-le de facon a 
faciliter son acces. Tenez compte de 1' agent utilisateur probable, de la 
configuration materielle envisageable, etc. Votre site doit-il etre visite 
par des personnes agees, des families, le grand public ? Partez alors du 
principe qu'ils possedent un ecran de 17 pouces dote d'une resolution 
minimale de 800 x 600. Votre site est consacre a la programmation 
avancee ? Verifiez qu'il gere bien le texte : de nombreux utilisateurs 
UNIX ne possedent que des navigateurs en mode Texte seul. Votre site 
concerne les jeux video ou s'adresse a des professionnels de 
1'imprimerie et du graphisme ? Vous pouvez sans crainte supposer qu'ils 
disposent d'un peripherique d'affichage de haut de gamme, 
probablement meme superieur au votre. 

Voici les principaux pieges d'accessibilite rencontres lors de la 
conception d'un site Web : 

Les cadres rendent la navigation difficile sans souris. De surcroit, 
ils posent probleme sur de petits ecrans a faible resolution et ne 
sont pas reconnus par les navigateurs textuels. 

Les tableaux sont assez mal reconnus par les navigateurs textuels, 
mais permettent d'afficher efficacement des donnees brutes. Si 
vous defmissez la taille et la largeur, les utilisateurs possedant un 
affichage limite seront obliges de faire denier la page pour lire 
l'integralite du tableau. Un tableau peut souvent etre remplace par 
un autre element structurel, comme un en-tete ou un pied de page, 
present sur toutes les pages du site. Utilisez toujours le nouvel 
attribut summary pour procurer une alternative texte au tableau. 

Les images posent rarement de problemes, meme si de nombreux 
agents utilisateurs ne les affichent pas, par construction ou suite a 
un choix de l'utilisateur. Empecher le chargement des graphismes 
permet de diminuer le temps de chargement d'une page Web ou 
facilite le travail d'un navigateur texte-parole. L'attribut alt 
place dans 1' element IMG permet aux utilisateurs ayant desactive 
les images d'en obtenir une description. 

Meme si les graphismes animes permettent de capter 1' attention, 
ils deviennent irritants lorsqu'ils apparaissent sur des pages de 
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contenu et non sur des pages de navigation. Une animation 
agressive peut rendre difficile la concentration d'utilisateurs 
sensibles a la lumiere. Enfin, les utilisateurs peuvent bloquer les 
animations apres leur chargement dans la plupart des navigateurs. 

Les formulaires ont subi de lourdes modifications en vue 
d'ameliorer l'accessibilite. Le deplacement entre les champs d'un 
formulaire s'accomplit traditionnellement a l'aide de la touche 
fEjj] du clavier, parcourant ainsi les champs dans l'ordre ou ils ont 
ete rediges en code HTML. Cela peut poser quelques problemes, 
particulierement s'il existe des liens hypertextes supplementaires 
(comme des publicites) au milieu de la page. Utilisez les elements 
FIELDSET et LEGEND ainsi que l'attribut tabindex (decrits dans 
le Chapitre 8) arm d' aider les utilisateurs a naviguer dans le 
formulaire sans la souris. 



ATTENTION 



Cas de l'attribut alt 

Vous devez toujours doter une image d' equivalent texte, mais la 
valeur de l'attribut alt doit satisfaire certains criteres, faute de quoi il 
peut etre considere comme suspect. Respectez les regies suivantes : 

Le texte ne doit pas depasser 150 caracteres (10 a 12 mots). N'ecrivez pas : 

<IMG src="images/couchersoleil . jpg" 
alt="Coucher de soleil sur le lac de Linciel. 
Remarquez le jeu du vent sur les vagues 

et, a 1' arriè re-plan, la vue sur la 

montagne du Destin">. 

Le texte ne doit pas decrire une image qui sert de lien, mais la destination 
du lien. 

<A href="images/couchersoleil . jpg"> 
<IMG src="images/scouchersoleil . jpg" 

alt="Coucher de soleil sur le lac de Linciel"> 
Coucher de soleil</A> 

Utilisez plutot : 

<A href="images/couchersoleil . jpg"> 
<IMG src="images/scouchersoleil . jpg" 

alt="Lien vers 1' image du coucher de soleil 

sur le lac de Linciel">Coucher de soleil</A> 

II ne doit pas contenir d' informations sur la taille du fichier, ni un nom de 
fichier ou une extension de fichier image. N'ecrivez jamais : 

<IMG src="images/couchersoleil . jpg" 

alt="Coucher de soleil sur le lac de Linciel. 
Nom : couchersoleil . Type : jpg. Taille : 64 500 octets"> 
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II ne doit pas servir de commentaire : 

<1MG src="images/couchersoleil . jpg" alt="Insé rer 
1' image ici"> 

Enfin, les images d'espacement, les puces et les barres horizontales 
doivent egalement posseder un attribut alt defini. 



Accessibility des tableaux 

Les tableaux sont une des structures HTML qui posent le plus de 
problemes aux agents utilisateurs non visuels. Pourtant, HTML dispose 
desormais des outils necessaires a en permettre une restitution parfaite. 
II suffit de les mettre en ceuvre. 

Une cellule de tableau peut contenir deux types d' informations : des 
informations de rubrique (ou libelle) et des informations de donnees. 
Cette distinction permet aux agents utilisateurs de restituer les cellules 
de rubrique et de donnees differemment, meme en 1' absence de feuilles 
de style. Par exemple, les agents utilisateurs visuels peuvent presenter le 
texte des cellules de rubrique en caracteres gras. Les synthetiseurs de 
parole peuvent restituer les informations de rubrique avec une inflexion 
de voix particuliere. 

L'element TH definit une cellule qui contient une indication de rubrique. 
Les agents utilisateurs disposent de deux types d' informations de 
rubrique : le contenu de l'element TH et la valeur de 1' attribut facultatif 
abbr. Les agents utilisateurs doivent restituer soit le contenu de la 
cellule, soit la valeur de 1' attribut abbr. Pour les medias visuels, cette 
derniere possibilite peut etre adequate quand il n'y a pas suffisamment 
de place pour restituer le contenu entier de la cellule. Pour les medias 
non visuels, l'attribut abbr peut s'employer comme abreviation des 
rubriques du tableau, quand celles-ci sont restituees en accompagnement 
du contenu des cellules concernees. Les attributs headers et 
scope permettent egalement aux auteurs d'assister les agents 
utilisateurs non visuels dans leur traitement des informations de 
rubrique. 

L'element TD definit une cellule qui contient des donnees. Une cellule 
peut etre vide (ne pas contenir de donnees). 
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Les agents utilisateurs non visuels peuvent faire appel a certains 
attributs des elements TD et TH pour restituer les cellules du tableau plus 
intuitivement : 

Pour une cellule de donnees particuliere, l'attribut headers 
repertorie les cellules qui fournissent des indications de rubrique 
pertinentes. Chaque cellule de rubrique doit etre nominee a l'aide 
de l'attribut id. II n'est toutefois pas toujours possible de 
distinguer clairement cellules de rubrique et cellules de donnees. 
Servez-vous pour de telles cellules de l'element TD accompagne 
d'un attribut id ou scope, selon que l'un ou l'autre est le plus 
adapte. 

Pour une cellule de rubrique donnee, l'attribut scope indique a 
1' agent utilisateur les cellules concernees par ces indications de 
rubrique. Les auteurs peuvent choisir d' employer cet attribut 
plutot que l'attribut headers, s'ils considerent qu'il convient 
mieux. Ces deux attributs remplissent la meme fonction. 
L'attribut headers est en general necessaire quand les rubriques 
se trouvent a une position inhabituelle par rapport aux donnees 
qui les concernent. 

L'attribut abbr specifle un nom de rubrique abrege pour les 
cellules de rubrique, pour que les agents utilisateurs puissent 
restituer plus rapidement les indications de rubrique. 

Dans l'exemple suivant, nous assignons des indications de rubrique aux 
cellules en deflnissant l'attribut headers. Chaque cellule de la meme 
colonne se rapporte a la meme cellule de rubrique (via l'attribut id). 

Listing 11-1 : Extrait du fichier headers.html 

<TABLE border="l" summary="Ce tableau repré sente 
le nombre de livres emprunté s par chaque membre de 
la famille, et le nombre de livres non encore rendus . "> 
<CAPTION>Livres emprunté s par chaque membre de 
la famille</CAPTION> 
<TR> 

<TH id="tl">Nom</TH> 

<TH id="t2">Livres</TH> 

<TH id="t3" abbr="Sortis">Non rendus ?</TH> 
<TR> 

<TD headers="tl">Claude</TD> 

<TD headers="t2">10</TD> 

<TD headers="t3">2</TD> 
<TR> 

<TD headers="tl">Martine</TD> 
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<TD headers="t2">5</TD> 
<TD headers="t3">0</TD> 
</TABLE> 
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Figure 11.3 : 

Tableau employant I'attribut 
headers 



Un synthetiseur de parole pourrait restituer cette table comme suit : 

Legende : Livres empruntes par chaque membre de la famille 

Resume : Ce tableau represente le nombre de livres 

empruntes par chaque membre de la famille, et le nombre 

de livres non encore rendus. 

Nom : Claude, Livres : 10, Sortis : 2 

Norn : Martine, Livres : 5, Sortis : 

Remarquez la maniere dont la rubrique Non rendus ? s'abrege en Sortis, 
grace a I'attribut abbr. 

Vous pourriez ecrire le meme exemple en substituant I'attribut scope a 
I'attribut headers. 

Listing 11-2 : Extraitdiifichierscope.html 

<TABLE border="l" summary="Ce tableau repré sente 
le nombre de livres emprunté s par chaque membre 
de la famille, et le nombre de livres non encore rendus . "> 
<CAPTION>Livres emprunté s par chaque membre 

de la famille</CAPTION> 
<TR> 

<TH scope="col">Nom</TH> 

<TH scope="col">Livres</TH> 

<TH scope="col" abbr="Sortis">Non rendus ?</TH> 
<TR> 

<TD>Claude</TD> 

<TD>10</TD> 

<TD>2</TD> 
<TR> 

<TD>Martine</TD> 
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<TD>5</TD> 
<TD>0</TD> 
</TABLE> 



Remarquez la valeur col de l'attribut scope, qui signifie « toutes les 
cellules de la colonne active ». Affiche dans un navigateur visuel, 
1' aspect est identique. II en est de meme avec un agent utilisateur non 
visuel. 
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Figure 11.4 : 

Tableau employant l'attribut scope 



Les autres valeurs de l'attribut scope permettent de construire des 
tableaux plus complexes : 

Listing 11-3 : Extrait du fichierscope2.html 

<TABLE border="l" cellpadding="5" cellspacing="2" 
summary="Quelques livres traduits par Fabrice 
Lemainque, classé s par titre, Seacute; diteur, 
ré sums, code ISBN et prix."> 
<TR> 

<TH colspan="5" scope="colgroup">Traductions</TH> 
</TR> 
<TR> 

<TH scope="col" abbr="Titre">Titre du livre </TH> 

<TH scope="col" abbr="Ed. ">Éditeur</TH> 

<TH scope="col">Ré sumé </TH> 

<TH scope="col">Code ISBN</TH> 

<TH scope="col">Prix</TH> 
</TR> 
<TR> 

<TD scope="row">Wi-Foo, piratage et dé fense des reseaux 

S< sans fil</TD> 

<TD>CampusPress</TD> 

<TD> 
Le dé veloppement des ré seaux sans fil 
s' accé lè re . Pourtant, les problèmes 
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de sSeacute; curitseacute; liSeacute;s Sagrave; ce type de 
ré seau sont largement sous-Seacute; stimSeacute; s . Ce 
livre Seacute; tudie tant les mSeacute; thodes employ Seacute; es 
pour pseacute; nseacute; trer un tel ré seau que celles 
qui permettent de laisser les assaillants et les curieux 
dehors. <EM>Niveau : IntermSeacute;diaire Sagrave; 
avancSeacute; .</EM> 

</TD> 

<TD>2-744 0-194 8-8</TD> 

<TD>47 Seuro;</TD> 
</TR> 
<TR> 

<TD scope="row">La Bible C++</TD> 

<TD>Micro Application</TD> 

<TD> 
La ré f Seacute; rence absolue pour maî triser 
la programmation C++ !<BR> 

Destiné aussi bien aux débutants qu'aux 
utilisateurs conf irmé s, cet ouvrage, 

ré f Seacute; rence incontesté e outre-atlantique 
et traduit en Français, est un vé ritable 
outil de cours dé livrant aux utilisateurs des 
bases solides et des connaissances poussé es sur 
le langage C++. L' utilisateur dispose ici de toutes les 
informations pour comprendre les fondements du langage, 
resoudre ses problèmes, puis dé velopper des 
applications performantes avec le langage C++. 
<EM>Niveau : Intermé diaire Sagrave; avancSeacute; . 
</EM> 

</TD> 

<TD>2-742 9-3717-X</TD> 

<TD>81 Seuro;</TD> 
</TR> 
</TABLE> 
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Figure 11.5 : 

Tableau complexe 
employant I'attribut scope, 
avec des cellules 
fusionnees. 



LE GUIDE COMPLET 445 



!hapitre 1 1 



Publication sur le Web 



Remarquez l'emploi de la valeur row pour l'attribut scope. Meme si la 
premiere cellule de chaque ligne contient des donnees et non des 
indications de rubrique, l'attribut scope fait que la cellule de donnees 
se comporte comme une cellule de rubrique de ligne. Ceci permet aux 
synthetiseurs de parole de fournir a la demande le nom du livre concerne 
ou de le declarer immediatement avant le contenu de chaque cellule. 

II est parfois utile de categoriser les cellules. Les utilisateurs qui 
parcourent une table avec un agent utilisateur base sur la parole peuvent 
souhaiter entendre une explication sur le contenu d'une cellule, en plus 
du contenu en question. Pour ce faire, 1' agent utilisateur pourrait lire les 
indications de rubrique associees avant le contenu de la cellule de 
donnees. 

Les utilisateurs peuvent egalement vouloir des informations sur 
plusieurs cellules, auquel cas les indications de rubrique donnees au 
niveau de la cellule (attributs headers, scope et abbr) peuvent ne pas 
fournir le contexte adequat. Examinez le tableau suivant, qui montre la 
repartition des depenses au cours d'un voyage de plusieurs jours, a 
destination de deux villes, Toulouse et Montpellier. 
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Figure 11.6 : 

Depenses de voyage 



Le code de ce tableau est le suivant : 
Listing 11-4 : Extraitdufichiervacances.html 



<TABLE border="l" align="center" 



446 LE GUIDE COMPLET 



Accessibility 



summary="Ce tableau ré sume les dépenses 
occasionné s lors des vacances du mois de 
juillet Sagrave; Toulouse et Sagrave; Montpellier"> 
<CAPTION> 

Ré capitulatif des dépenses de vacances 
</CAPTION> 
<TR> 

<THX/TH> 

<TH>Alimentation</TH> 

<TH>Déplacement</TH> 

<TH>Divers</TH> 

<TH>Totaux</TH> 
</TR> 
<TR> 

<TH>Toulouse</TH> 

<THX/TH> 

<THX/TH> 

<THX/TH> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>17-07-05</TD> 

<TD>37.74</TD> 

<TD>32.0 0</TD> 

<TD>15.00</TD> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>18-07-05</TD> 

<TD>27.28</TD> 

<TD>4.0 0</TD> 

<TD>2 0.53</TD> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>Sous-totaux</TD> 

<TD>65.02</TD> 

<TD>36.00</TD> 

<TD>35.53</TD> 

<TD>136.52</TD> 
</TR> 
<TR> 

<TH>Montpellier</TH> 

<THX/TH> 

<THX/TH> 

<THX/TH> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>19-07-05</TD> 

<TD>56.25</TD> 

<TD>2 9.0 0</TD> 
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<TD>0 0.0 0</TD> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>20-07-05</TD> 

<TD>35.00</TD> 

<TD>0.00</TD> 

<TD>36.00</TD> 

<TDX/TD> 
</TR> 
<TR align="right"> 

<TD>Sous-totaux</TD> 

<TD>91.25</TD> 

<TD>2 9.0 0</TD> 

<TD>36.00</TD> 

<TD>196.25</TD> 
</TR> 
<TR align="right"> 

<TH>Totaux géné raux</TH> 

<TD>156.27</TD> 

<TD>65.00</TD> 

<TD>71.53</TD> 

<TD>332.77</TD> 
</TR> 
</TABLE> 



L'utilisateur pourrait souhaiter extraire des informations du tableau sous 
la forme de requetes comme : 

Quel a ete le montant des frais de deplacement (essence, peage, 
etc.) ? 

Qu'ai-je depense en alimentation le 18 juillet ? 

Quel est le montant total des depenses a Montpellier ? 

Chaque requete implique un calcul par 1' agent utilisateur, qui peut faire 
intervenir zero ou plusieurs cellules. Pour determiner, par exemple, les 
depenses d' alimentation du 18 juillet, 1' agent utilisateur doit reconnaitre 
les cellules se rapportant a. Alimentation et a Dates (particulierement le 18 
juillet), puis determiner 1' intersection de ces deux ensembles. 

Pour satisfaire ce genre de requete, le modele de table HTML 4 permet 
aux auteurs de classer les rubriques et les donnees des cellules par 
categoric Par exemple, pour le tableau des frais de deplacement, 
l'auteur pourrait regrouper les cellules de rubrique Montpellier et 
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categorie date. Les trois questions precedentes se traduiraient alors 
comme suit : 

« Quel a ete le montant des frais de deplacement ? » devient 
« Quelles sont toutes les cellules de donnees qui appartiennent a 
la categorie depenses=Deplacement ? » 

«Qu'ai-je depense en alimentation le 18 juillet ? » devient 
« Quelles sont toutes les cellules dans les categories 
depenses=Alimentation et date=1 8-07-2005 ? » 

« Quel est le montant total des depenses a Montpellier ? » devient 
« Quelles sont toutes les cellules dans les categories 
depenses=Alimentation, Deplacement, Divers et ville=Montpellier ? » 

L'auteur categorise une cellule de rubrique ou de donnees en specifiant 
l'attribut axis de la cellule. Par exemple, dans le tableau des frais de 
deplacement, la cellule qui contient l'information Montpellier serait 
placee comme suit dans la categorie ville : 

<TH id="a6" axis="ville">Montpellier</TH> 

Toute cellule qui contient des informations relatives a Montpellier devrait 
se rapporter a cette cellule de rubrique grace a l'attribut headers ou a 
l'attribut scope. Ainsi, les frais d' alimentation du 18-07-2005 devraient 
etre balises pour se rapporter a l'attribut id (dont la valeur ici est a 6) de 
la cellule de rubrique : 

<TD headers="a6">27.28</TD> 

Chaque attribut headers fournit une liste de references id. Vous 
pouvez done categoriser une cellule donnee par divers moyens (ou selon 
un nombre quelconque de rubriques). 

Voici le balisage du tableau des depenses avec des indications de 
categorie. Les modifications apportees au fichier precedent figurent en 
gras : 

Listing 11-5 : Extraitdiifichiervacances2.html. 

</CAPTI0N> 
<TR> 

<THX/TH> 

<TH id="a2" axis="depenses">Alimentation</TH> 

<TH id="a3" axis="depenses">Déplacement</TH> 

<TH id="a4" axis="depenses">Divers</TH> 

<TD>Sous-totaux</TD> 
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</TR> 

<TR> 

<TH id="a6" axis="ville">Toulouse</TH> 

<THX/TH> 

<THX/TH> 

<THX/TH> 

<TDX/TD> 

</TR> 

<TR align="right"> 

<TD id="a7" axis="date">17-07-05</TD> 
<TD headers="a6 a7 a2">37 . 74</TD> 
<TD headers="a6 a7 a3">32 . 00</TD> 
<TD headers="a6 a7 a4">15 . 00</TD> 
<TDX/TD> 

</TR> 

<TR align="right"> 

<TD id="a8" axis="date">18-07-05</TD> 
<TD headers="a6 a8 a2">27 . 28</TD> 
<TD headers="a6 a8 a3">4 . 00</TD> 
<TD headers="a6 a8 a4">20 . 53</TD> 
<TDX/TD> 

</TR> 

<TR align="right"> 
<TD>Sous-totaux</TD> 
<TD>65.02</TD> 
<TD>36.00</TD> 
<TD>35.53</TD> 
<TD>136.52</TD> 

</TR> 

<TR> 

<TH id="alO" axis="ville">Montpellier</TH> 

<THX/TH> 

<THX/TH> 

<THX/TH> 

<TDX/TD> 

</TR> 

<TR align="right"> 

<TD id="all" axis="date">19-07-05</TD> 
<TD headers="alO all a2">56 . 25</TD> 
<TD headers="alO all a3">29 . 00</TD> 
<TD headers="alO all a4">00 . 00</TD> 
<TDX/TD> 

</TR> 

<TR align="right"> 

<TD id="al2" axis="date">20-07-05</TD> 
<TD headers="alO al2 a2">35 . 00</TD> 
<TD headers="alO al2 a3">0 . 00</TD> 
<TD headers="alO al2 a4">36 . 00</TD> 
<TDX/TD> 

</TR> 
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L' aspect du tableau dans un navigateur visuel est strictement identique. 
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Figure 11.7 : 

Tableau des depenses de voyage 
avec categorisation des cellules 



Pourtant, ce balisage permet aux agents utilisateurs d'eviter de troubler 
l' utilisateur avec des informations parasites. Par exemple, si un 
synthetiseur de parole devait dire tous les nombres figurant dans la 
colonne Alimentation de cette table, en reponse a la question « Quelle est 
la totalite de mes frais de repas ? », l' utilisateur serait incapable de 
distinguer entre les depenses du jour et les sous-totaux ou les totaux. En 
categorisant soigneusement les cellules de donnees, les auteurs 
permettent aux agents utilisateurs de faire des distinctions semantiques 
importantes lors de la restitution. 

II n'existe pas de limite quant a la maniere dont les auteurs peuvent 
categoriser les informations contenues dans une table. Dans cette table 
des frais de deplacement, par exemple, on pourrait rajouter les 
categories sous-totaux et totaux. 

Les agents utilisateurs, notamment les synthetiseurs de parole, peuvent 
combiner les informations communes a plusieurs cellules resultant d'une 
requete. Par exemple, si l'utilisateur demande « Qu'ai-je depense en 
alimentation a Montpellier ? », F agent utilisateur determinerait d'abord 
les cellules en question (19-07-05 : 56,25 ; 20-07-05 : 35,00) puis 
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restituerait ces informations. Un agent utilisateur disant ces informations 
pourrait les lire ainsi : 

Ville : Montpellier. Date : 19-07-05. Depenses, 
Alimentation : 56,25 

Ville : Montpellier. Date : 20-07-05. Depenses, 
Alimentation : 35,00 

ou, de maniere plus concise : 

Montpellier, 19-07-05, Alimentation : 56,25 

Montpellier, 20-07-05, Alimentation : 35,00 

Une restitution encore plus econome combinerait les informations 
communes et les reorganiserait : 

Montpellier, Alimentation, 19-07-05 : 56,25 

20-07-05 : 35,00 

*—■ L'attribut axis 

La specification HTML 4.01 n'oblige pas les agents utilisateurs a 
gerer les informations fournies par l'attribut axis. Elle n'emet pas non 
plus de recommandation sur la maniere dont les agents utilisateurs 
peuvent presenter les informations de l'attribut axis aux utilisateurs, ni 
sur la facon dont les utilisateurs peuvent effectuer des requetes vers 
1' agent utilisateur. 



En l'absence d'indications de rubrique fournies par l'attribut scope ou 
l'attribut headers, les agents utilisateurs peuvent neanmoins construire 
des informations de rubrique en fonction de l'algorithme suivant, dont 
l'objectif consiste a rechercher une liste ordonnee de rubriques. 

A partir de la position de la cellule, rechercher d'abord des 
cellules de rubrique de ligne vers la gauche. Puis rechercher des 
cellules de rubrique de colonne vers le haut. La recherche dans 
une direction s'acheve quand le bord du tableau est atteint ou bien 
quand on trouve une cellule de donnees qui fait suite a une cellule 
de rubrique. 
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Les rubriques de ligne sont inserees dans la liste, dans l'ordre oil 
elles apparaissent dans la table. Pour les tableaux de gauche a 
droite, les rubriques s'inserent de gauche a droite. 

Les rubriques de colonne sont inserees apres les rubriques de 
ligne, dans l'ordre ou elles apparaissent dans le tableau, de haut 
en bas. 

Si une cellule de rubrique possede un attribut headers, les 
rubriques referencees par cet attribut sont inserees dans la liste et 
la recherche s'acheve pour la direction courante. 

Les cellules TD qui possedent un attribut axis sont egalement 
traitees comme des cellules de rubrique. 



Accessibility des jeux d'encadrement 

Les jeux d'encadrement font egalement partie des structures delicates a 
interpreter par les agents utilisateurs non visuels. Les remedes sont 
toutefois ici presque inexistants. La seule solution, comme cela etait 
evoque au Chapitre 7, consiste a employer un element NOFRAMES et a 
fournir un lien alternatif vers une version depourvue de cadres. 

<NOFRAMES> 

<Hl>Bienvenue chez ORIGNAL TRADUCTIONS !</Hl> 

Votre agent utilisateur ne reconnaî t malheureusement pas les 

jeux d'encadrement. Cliquez <A href="oritexte . html">ici</A> pour 

accé der au site alternatif en version purement textuelle. 

</NOFRAMES> 

Avec l'agent utilisateur pwWebspeak, (n'oubliez pas que pwWebspeak 
« lit » ce qui est affiche), vous obtenez 1' aspect visuel qui est presente 
dans la figure suivante. 



■Jnl«l 



http://fabrice.lemainque.free.fr/ 



Orignal Traductions 

- Linkto a Frame: nav - 

- Linkto a Frame: main - 

Bienvenue chez ORIGNALTRADUCTIONS ! 

votre agent utilisateur ne reconnait malheureusement pas les jeux 
d'encadrement. cliquez -Link: ici pour acceder au site alternatif en version 
urement teHtuelle. | 



The Productivity Works 
Mating the Web Speak 



Web | Setup | 



Figure 11.8 : 

pwWebSpeak ne 
reconnait pas les jeux 
d'encadrement 
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Le navigateur en texte seul Linx affiche ce qui est presente figure 
suivante. 




Figure 11.9 : Linx ne reconnalt pas non plus les jeux d'encadrement 

Enfin, un navigateur visuel ne reconnaissant pas les jeux d'encadrement 
pourrait afficher ce qui est presente dans la figure qui suit. 



Fichier Edition Affichage A[ler a Marque-pages Outils 



O 



<? • <■- - 



© P3 ® « [B" 



Bienvenue chez ORIGNAL 
TRADUC TIONS ! 

Votre agent utflisateur ne reconnait rnalhsiM-euseraent pas les 
jeux d'encadrement Cliquez pom ar,i-eder au sr:p alternatif en 
version purement textuelle. 



Figure 11.10 : 

Affichage avec un navigateur 
visuel ne reconnaissant pas les 
jeux d'encadrement 



En l'absence de l'element NOFRAME, les agents utilisateurs afficheraient 
une page vide ! 



Modules complementaires (plug-in) 

Pourquoi aborder ce sujet dans une section traitant de l'accessibilite ? 
Parce que, une fois encore, le choix d'imposer le chargement et 
l' installation de modules complementaires (ou plug-in) pour acceder a 
un site depend du public vise. 

Si celui-ci est compose d'internautes avertis, il est probable qu'ils 
disposent deja des principaux modules complementaires et ne 
rechigneront pas a les installer eventuellement si ce n'est pas le cas. En 
revanche, de nombreux utilisateurs moins bien informes ne se donneront 
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pas la peine de telecharger un programme complementaire pour 
visionner certaines sections de votre site. Prevoyez toujours une solution 
alternative pour ce type de visiteurs ! 

Voici quelques exemples de contenus susceptibles de reclamer un 
module complementaire : 

Texte au format PDF (Portable Document format) : Adobe 
Acrobate Reader. 

Musique : RealAudio, MIDI, WAV, QuickTime. 

Video : MPEG, AVI. 

Animations : Flash/Shockwave (Macromedia), applets Java. 

Mondes virtuels : VRML . 

Adobe Acrobat Reader est un celebre plug-in qui permet de lire et 
d'imprimer des documents du Web ayant ete formates pour 
1' impression. Les utilisateurs peuvent avoir acces aux formulaires 
gouvernementaux, aux brochures collectives et a bien d'autres 
informations. Si l'apparence de l'information que vous voulez presenter 
est tres importante, envisagez de la presenter comme un fichier Adobe 
Acrobat. 

Shockwave est egalement tres repandu. Propose par Macromedia, il 
permet aux utilisateurs de voir des animations sophistiquees ainsi que 
des films crees avec le logiciel Director de Macromedia. 

Les applets Java necessitent l'installation d'une machine Java virtuelle 
(JVM, Java Virtual Machine), toutefois parfois integree au navigateur (cas 
d 'Internet Explorer). 

L' incorporation de ce type d' elements dans une page Web s'effectue a 
l'aide de l'element OBJECT deja aborde. L'element OBJECT a pour but 
de gerer a terme tous les contenus non textuels. Par exemple, des images 
simples, des films et des applets Java peuvent tous etre affiches a l'aide 
de l'element OBJECT. 

Cet element permet de creer differentes possibilites pour les utilisateurs 
qui ne peuvent visualiser vos fichiers multimedias : un utilisateur peut 
voir du texte, un autre une image fixe, un dernier une video de haute 
qualite. 
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Comme le montre le tableau suivant, certains modules complementaires 
sont toutefois largement installes : 



Tableau 11.1 : Les technologies [plug-in] installees sur les postes 

des internautes en fevrier 2008. 
[Source : http://www. web-stats, org/k/pluggins-par-pluggins. html] 


Rang 




Produit 




Presence 


1 

2 




Java 




98,7 % 




Javascript 




98,5% 


3 




Flash 




96,9% 


4 




QuickTime 




49,9% 


5 




Real Player 




27,6% 


6 




Shockwave 




24,9% 


7 




PDF 




13,3% 



1 1 .3. Adaptation a plusieurs langues 

Vous pourriez vouloir proposer des versions de votre site adaptees a 
plusieurs cultures et langues, arm d'elargir votre public. Certains parlent 
pour ce faire d' internationalisation du site, terme souvent confondu avec 
celui de localisation. 

Pour simpliner, 1' internationalisation est le processus par lequel un 
produit est rendu disponible aux utilisateurs d'autres langues et d'autres 
cultures. Pour HTML 4.0, il s'agit essentiellement de prendre en charge 
les langues qui se lisent de droite a gauche, comme l'hebreu et l'arabe, 
ainsi que celles fondees sur des ideogrammes, comme le japonais et le 
chinois. En revanche, la localisation consiste a adapter un produit ou une 
technologie a un marche local compose de personnes employant une 
langue specifique. Autrement dit, vous internationalisez votre site en 
localisant differentes versions de vos pages. 

L' ensemble de caracteres Unicode desormais adopte par HTML est la 
reponse ultime au probleme des differentes langues. II dispose de plus 
de 25 000 caracteres differents et est destine a representer les langues du 
monde entier (plus quelques autres, comme le klingon - attribut 
lang="x-klingon", x - specifiant une langue experimentale). Vous 
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trouverez des informations complementaires sur Unicode a l'adresse 
www.unicode.org/ 

Vous specifiez la langue d'un element HTML a l'aide de son attribut 

lang. 



Attribut lang 

L'attribut lang specifie la langue de base dans laquelle sont ecrits les 
valeurs des attributs et le contenu textuel d'un element. La valeur par 
defaut de cet attribut n'est pas definie. Cet attribut s'applique ou non a 
un attribut selon sa syntaxe et sa semantique et 1' operation en jeu. 

Vous devez etre capable d'ecrire dans la langue humaine de votre 
document. Le Web ne se comporte pas comme un traducteur universel, 
capable par exemple de modifier une page Web du francais au japonais. 
Vous devez le traduire vous-meme en japonais, dans le pire des cas a 
l'aide d'un des nombreux programmes de traduction disponibles sur le 
Web. 

L'indication de langue procuree par l'attribut lang peut permettre a un 
agent utilisateur de controler la restitution de diverses manieres, en 
respectant les pratiques culturelles en usage dans une langue donnee. 

Si le but de l'attribut lang est de permettre aux agents utilisateurs de 
representer un contenu de facon plus pertinente, il n' incite aucunement a 
representer de facon moins pertinente les caracteres atypiques pour une 
langue particuliere. Un agent utilisateur doit toujours faire de son mieux 
pour representer tous les caracteres, quelle que soit la valeur specifiee 
par lang. 

Par exemple, imaginez que vous ayez place des caracteres de 1' alphabet 
grec au milieu d'un texte en francais : 

<PxQ lang="f r">Ses super-pouvoirs etaient la consequence d'un 
*< rayonnement γ</Q>, expliqua-t-il . </P> 

L'agent utilisateur doit s'efforcer de representer le contenu francais de 
maniere appropriee (dans sa facon de gerer les guillemets par exemple) 
et faire son possible pour representer le caractere y, meme si ce n'est pas 
un caractere francais. 

Remarquez que Firefox 
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jjj u file:f/fS:fHTMLf| T | > | EH Google [ 



Emploi de 
l'attribut lang 



"Ses super-pouvoirs etaient la consequence d'un 
rayonnement y". eqjliqua-t-il. 



et Internet Explorer 



Figure 11.11 : 

Apercu du code precedent 
avec le navigateur Firefox 



Fichier Edition Affichage Favoris Outils ? 

) Precedente - ' Q [^ ■ O Rechercher VV Favoris '' 



Adresse #; G;lHTML\Mon Sir.eUl\lang.html 



rElH™ 



Emploi de 
l'attribut lang 



rrrr^ 



j 



Ses super-pouvoirs etaient la consequence d'un 

lfivonnement y, expliqua-t-il. Figure 11.1Z . 

Apercu du code precedent 
avec le navigateur Internet 
1 Explorer 

n' interpreted pas de facon identique les guillemets normalement induits 
par l'element Q, comme nous l'avons vu lors de l'etude de cet element. 

L'attribut lang recoit comme valeur un code qui identifie une langue 
parlee, ecrite, ou utilisee d'une maniere ou d'une autre pour la 
communication d' informations entre personnes. Les langages 
informatiques sont explicitement exclus des codes de langue. Le 
document RFC 1766 definit et explique les codes de langue qui doivent 
etre utilises dans les documents HTML. 

Brievement, les codes de langue consistent en un code principal et une 
suite eventuellement vide de sous-codes : 

code-de-langue = code-principal ("-" sous-code)* 

Le tableau suivant presente certains codes de langue. 
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Tableau 11.2 : Valeurs de I'attribut lang 


Valeur de lang 


Langage 


ar 


Arabe 


de 


Allemand 


el 


Grec 


en 


Anglais 


en— cockney 


Version est-londonienne de I'anglais 


es 


Espagnol 


fr 


Francais 


fr-CA 


Francais canadien 


he 


Hebreu 


hi 


Hindi 


i-navaj o 


La langue navajo parlee par certains Indiens d'Amerique 


it 


Italien 


ja 


Japonais 


nl 


Neerlandais 


Pt 


Portugais 


ru 


Russe 


sa 


Sanscrit 


ur 


Ourdou 


x-klingon 


Klingon (pensez a StarTrek). Le code principal x signale 
une langue experimental. 


zh 


Chinois 



Un element herite de l'indication du code de langue selon l'ordre de 
priorite suivant (de la priorite la plus elevee a la plus faible) : 

L'attribut lang specifie pour l'element lui-meme. 

L'element parent le plus proche, dont l'attribut lang est specifie. 

L'en-tete HTTP Content-Language (qui peut etre configure au 
sein d'un serveur). Par exemple : Content-Language: fr-CA. 
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Les valeurs par defaut de 1' agent utilisateur et les preferences de 
l'utilisateur. 

Dans l'exemple suivant, la langue principale du document est le francais 
(f r). Un paragraphe est declare comme etant en espagnol (es), apres 
lequel la langue principale redevient le francais. Le paragraphe qui vient 
ensuite inclut une phrase enchassee en japonais (ja), apres laquelle la 
langue principale redevient le francais. 

Listing 11 -G : Extraitdufichierdepression.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http: //www. w3.org/TR/html4/strict .dtd"> 

<HTML lang="fr"> 

<HEAD> 

<TITLE>Dépression multilingue</TITLE> 

</HEAD> 

<BODY> 

...A propos de la dépression . . . 

<P lang="es">£Tiene Usted Depresió n? 

<P> La d´pression au Japon, connue sous le nom de <EM 

lang="ja">Utsubyo</EM>, y est tres f ré quente : 

probablement une personne sur sept en souffre. . . 

</BODY> 

</HTML>' 

La figure suivante presente 1' aspect de cette page dans un navigateur. 



|L,H,HWMWIHM 

:hier Edition Affichage 



Marque-pages Qutils 



<? • ^ 



@r fcT3 © « [E~ 



Depression 
multilingue 



JO|x| 



...Apropos de la depression... 

^Tiene Usted Depresion? 

La depression, connue an Japon sous le nom de 

Utsubyo. y est ti es fiequente : probablement une 

personne sur sqjt en souffre... 






zi 



Figure 11.13 : 

Texte multilingue 
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Heritage 

Les cellules d un tableau peuvent henter des valeurs de lang non de 
leur parent mais de la premiere cellule d'un groupe. 



Lorsqu'un agent utilisateur ajuste la restitution en fonction des 
indications de langue (en comparant les codes de langue de la feuille de 
style et les valeurs de l'attribut lang), il doit toujours donner la 
preference aux codes qui coincident parfaitement. II peut toutefois 
considerer la correspondance des codes principaux comme suffisante. 
Ainsi, si l'attribut lang est specifie pour l'element HTML avec la valeur 
f r-CA, 1' agent utilisateur devrait-il preferer les indications de style qui 
correspondent d'abord a f r-CA, puis a la valeur plus generale f r. 

Les agents utilisateurs ne doivent pas utiliser l'attribut lang pour 
determiner la direction du texte. 



Attribut dir 

Outre specifier la langue d'un document a l'aide de l'attribut lang, il 
peut etre necessaire de definir la directionnalite de base (de gauche a 
droite ou de droite a gauche) de certaines parties du texte d'un 
document, de la structure d'un tableau, etc. Vous y parvenez a l'aide de 
l'attribut dir, qui specifie la direction de base d'un texte neutre par 
rapport a la direction (autrement dit, un texte depourvu de 
directionnalite inherente telle que defmie dans la norme Unicode) dans 
le contenu ou les valeurs d' attribut d'un element. II specifie aussi la 
directionnalite des tableaux. Les valeurs possibles sont : 

LTR (left to right) : texte ou tableau allant de gauche a droite. 
RTL (right to left) : texte ou tableau allant de droite a gauche. 

La specification Unicode attribue une directionnalite aux caracteres et 
definit un algorithme complexe pour determiner la directionnalite 
correcte d'un texte. Si un document ne contient pas de caracteres 
affichables droite a gauche, l'agent utilisateur conforme n'est pas tenu 
d'appliquer 1' algorithme bidirectionnel Unicode. Si un document 
contient des caracteres droite a gauche, et si l'agent utilisateur affiche 
ces caracteres, l'agent utilisateur doit utiliser 1' algorithme bidirectionnel. 
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Meme si la norme Unicode specifie des caracteres speciaux concernant 
la direction du texte, HTML offre des structures de balisage de niveau 
superieur qui accomplissent la meme chose : l'attribut dir (a ne pas 
confondre avec l'element DIR) et l'element BDO. Ainsi, pour faire une 
citation en hebreu, il est plus intuitif d'ecrire : 

<Q lang="he" dir="rtl">. . . une citation en hebreu .. . </Q> 

que de faire appel a des caracteres Unicode : 

S#x202B;״ . . .une citation en hebreu ... ״ ‬ 



EEH 



ini^i 



Fichier Edition Affichage Hfstorique 



Attribut dir 

" . une citation en hebreu. " 
"une citation en hebreu. " 



Tsrmine 



Figure 11.14 : 

Attribut dir avec Firefox 



fcllMHHWIMMIHBB ^Jnlxj 



!) 



) Precedente - - I X j 



Adresse |@ G:\HTML\Mon Sit_J Q C 



Attribut dir 

..ime cri:A::iot! en hebreu.. 
■'. .line citation sn hebreu. ." 
| J Poste de travail 



J 



Figure 11.15 : 

AtZribut dir avec internet Explorer 

Comme le montrent les copies d'ecran precedentes, ces deux lignes de 
code ont un effet identique. . . mais pas celui attendu, puisque le texte est 
bien ecrit de gauche a droite ! Ni Firefox ni Internet Explorer ne 
semblent reconnaitre pour le moment l'attribut dir. 

En realite, ces deux navigateurs semblent interpreter l'attribut dir 
comme similaire a un attribut align. Ainsi, le code suivant : 

<HTML dir="RTL"> 

<HEAD> 

<TITLE>...un titre allant normalement de droite a gauche. . .</TITLE> 

</HEAD> 

<BODY> 
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<Hl>Titre allant aussi de droite a gauche. . .</Hl> 

<P dir="ltr">. . . texte allant de gauche a droite .. . </P> 

<P>. . .encore un texte de droite a gauche. . .</P> 

</BODY> 

</HTML> 

donne, avec ces deux navigateurs, un resultat strictement equivalent a : 

<HTML> 
<HEAD> 

<TITLE>...un titre allant normalement de droite a gauche .. .</TITLE> 

</HEAD> 

<BODY> 

<H1 align="right">Titre allant aussi de droite a gauche .. .</Hl> 

<P align="left">. .. texte allant de gauche a droite .. . </P> 

<P align="right">. .. encore un texte de droite a gauche .. .</P> 

</BODY> 

</HTML> 

Les figures suivantes presentent 1' aspect de ces deux codes avec Firefox. 



<?■<>■$ y> © fIT3 ® ok 1ST 



Titre allant aussi de droite a 
...gauche 



te:-ite allant de gauche a. droite... 



encore: un texte de droite h gauche . 



Figure 11.16 : 

Attribut dir avec Firefox 



<*-*•» O ©|Q zl ©« IB 




Titre allant aussi de droite a 




gauche... 




teste allf i lie a droite.. 




..encore un texte de droite a gauche ' 





Figure 11.17 : 

Attribut align avec Firefox 

Heureusement, il est possible de desactiver l'algorithme bidirectionnel 
Unicode et de specifier une directionnalite a l'aide de Felement BDO 
(BiDirectional Override). 



Element BDO 

Si l'algorithme bidirectionnel et F attribut dir devraient suffrre a gerer 
les changements de direction enchasses, il semble toutefois qu'ils ne 
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soient pas parfaitement pris en charge pour le moment. L' element BDO, 
dont les balises d'ouverture et de fermeture sont obligatoires, permet de 
definir une directionnalite independamment de l'algorithme bidirectionnel 
sur des passages choisis du texte. 

Cet element possede un attribut obligatoire dir, identique a celui vu 
ci-dessus, mais qui prevaut sur la directionnalite inherente des caracteres 
telle que definie dans Unicode. 

Reprenons l'exemple precedent, cette fois avec des elements BDO : 

<HTML> 

<HEAD> 

<TITLEXBDO dir="rtl">Elements BDO (droite a gauche) </BD0x/TITLE> 

</HEAD> 

<BODY> 

<HlXBD0 dir="rtl">Titre allant aussi de droite a gauche .. .</BD0x/Hl> 

<PXBDO dir="ltr">. .. texte allant de gauche a droite .. .</BDOx/P> 

<PXBD0 dir="rtl">. . .encore un texte de droite a gauche. . .</BDOx/P> 

</BODY> 

</HTML> 

Comme le montre la figure suivante, 1' aspect obtenu est celui souhaite, 
si ce n'est que l'element BDO n'est pris en compte que dans le corps du 
document, et non dans un element TITLE. 



<^-l; '-© O @[l73 ©ok [E~ 



etiord ed issua tnalla ei*tiT 
...ehcuag a 



.texte allant de gauche a droite.. 
ehcuag a etiord ed etxet rm erocne 



Figure 11.18 : 

Elements BDO et attributs dir avec 
Firefox 



Attention toutefois, seuls les navigateurs les plus recents reconnaissent 
l'element BDO. 

D'une facon generale, 1'algorithme bidirectionnel Unicode est d'une 
grande complexite et intervient dans de nombreux domaines. Si cela 
vous interesse, reportez-vous a la specification HTML 4.01 pour en 
apprendre plus a son sujet. 

Enfln, prenez garde a tester votre page en langue etrangere a l'aide d'un 
navigateur reconnaissant cette langue. Si l'aspect n'est pas correct, 
revenez en arriere et placez un attribut lang dans tout element relatif au 
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contenu de la page. II sera parfois necessaire d' avoir recours a un 
element <BASEFONT> dans la section <HEAD>, arm d'imposer 
l'utilisation d'une police exotique. 



Langues et jeux de caracteres 

Si vous realisez une page dans une langue autre qu'europeenne, 
n'oubliez pas de modifier la page de caracteres du document a l'aide de 
1'attribut charset. Certains alphabets, tel l'alphabet cyrillique, 
possedent des caracteres difficilement affichables a l'aide des caracteres 
d'Europe de l'Ouest Latin-1 (Western European), nommes ISO-8859-1. 
Les caracteres cyrilliques seront trouves dans la page Windows-1251, 
tandis que SHIFT_JIS et EUC-JP produisent les caracteres japonais. Vous 
pouvez specifier le jeu de caracteres pour un document en cyrillique 
comme ceci : 

<META http-equiv="Content-Type" content="text/html; charset= 
X Windows-1251"> 

L' image suivante montre une page russe, qui presente des caracteres 
cyrilliques, 
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Figure 11.19 : 

Site russe, a I'adresse 
http://www. cccp. de/ 

Voici le code source de cette page avec la specification du jeu de 
caracteres pour cette page. 
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Figure 11.20 : 

Code source de cette page, 
montrant le choix du jeu de 
caracteres Windows-1251. 
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Avec de nombreux navigateurs, vous pouvez forcer le choix du type 
d'encodage de la page. Par exemple, avec Firefox, vous choisissez 
Affichage / Encodage des caracteres. 




02.09. B 14:06) 

Unicode (UTF-3) 
(MIU-HYAUj 02.0' • Cyrillique (Windows-1251) 
Winy apynefi H no chinois simplifie (SB13030) 

Cyrillique (ISO-8S59--5) 



Figure 11. 21 : 

Modification de I'encodage 
de la page avec Firefox 



Choisir pour la page russe le jeu occidental n'est toutefois pas sage : 
comme le montre la figure suivante, la page devient incomprehensible. 
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Figure 11.22 : 

tet «wpJ| Aspect du site precedent, 
en imposant un encodage 
1 occidental ISO-8859- 1 . 



1 1 .4. Test du site 

Nous avons deja insiste sur le fait qu'il fallait toujours tester un site 
Web avec autant de navigateurs que possible. La plupart d'entre eux 
sont disponibles gratuitement, meme s'il ne s'agit que de versions de 
demonstration. D'une facon generale, comme cela a ete evoque dans le 
Chapitre 2, il est preferable de tester le site au moins sous Internet 
Explorer 6.0 et 7.0 et sous Firefox 1 et 2. 
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Dans le cas d'un public qui comprend des utilisateurs a difficultes 
visuelles, le mieux est un navigateur texte -parole. Ceux-ci sont plutot 
onereux, mais une version de demonstration de pwWebSpeack est 
disponible a l'adresse www.prodworks.com Une alternative consiste a 
utiliser un navigateur en texte seul, comme Lynx (http://lynx.browser.org/), 
arm de visualiser votre site. Prenez toujours la precaution d'examiner 
votre site sous un navigateur graphique apres avoir desactive les 
graphismes. Voici comment desactiver les graphismes avec les deux 
principaux navigateurs : 

Avec Internet Explorer, choisissez Outils / Options Internet. 
Cliquez sur l'onglet Avance, puis descendez dans la liste et 
decochez dans la section Multimedia l'option Afficher les images. 
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Figure 11.23 : 

Desactivation des images avec 
Internet Explorer 



Avec Firefox, choisissez Outils / Options. Choisissez 
Fonctionnalites Web dans le volet de gauche, puis decochez dans 
le volet de droite l'option Charger les images . 
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Figure 11.34 : 

Desactivation de 
graphismes avec Firefox 
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Remarquez qu'un navigateur a images desactivees (ou en texte seul) 
supprime toutes les indications des feuilles de style. Tout graphisme 
eventuellement present sur la page n'affiche que le texte present dans 
son attribut alt. 
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Figure 11.25 : 

Page Ma region dans 
Internet Explorer, les 
graphismes etant 
desactives. 



Bien evidemment, si vous realisez une page pour un intranet, testez-le 
avec le navigateur utilise par l'entreprise, pourvu de tous les 
programmes complementaires (plug-in) installes de facon standard. 

Prenez garde aux problemes de compatibilite entre navigateurs. La page 
est-elle parfaite avec un autre navigateur ? Si vous avez concu votre site 
en pensant a un navigateur unique, sans pouvoir exercer de controle sur 
le navigateur reellement utilise, n'imaginez pas que votre page sera 
« parfaite » pour chaque visiteur. Examinez votre page avec au moins un 
autre navigateur, et observez ses transformations, en verifiant qu'elle ne 
perd pas sa signification. Si tel etait le cas, essayez de la modifier arm 
que le message percu reste identique quels que soient le navigateur et la 
configuration materieile de l'utilisateur. 

II est bien stir difficile de disposer de tous les navigateurs sur son 
ordinateur. Plusieurs solutions sont possibles : 
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Partage du test des ressources Web avec d'autres. II peut s'agir 
d'amis ou de relations, qui possedent une architecture materielle 
et/ou un navigateur differents des votres. Vous pouvez egalement 
solliciter, sur certains groupes de discussion, l'examen de votre 
site. Certains developpeurs peuvent pousser le professionnalisme 
jusqu'a vous envoyer une capture d'ecran ! En attirant l'attention 
des testeurs sur certains problemes specifiques que vous 
suspectez, les reponses recues devraient vous permettre de 
resoudre tout probleme potentiel. 

Emploi de sites de test disponibles sur le Net (comme, par 
exemple, AnyBrowser.com). Vous pouvez : 

_ tester votre site a l'aide d'une simulation de navigateur de 
troisieme generation ; 
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Figure 11.26 : 

Test d'un site avec un 
navigateur de troisieme 
generation 



specifier plus precisement un niveau de compatibilite avec les 
specifications HTML ; 

tester l'affichage sur une WebTV. 
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Figure 11.27 : 

Test d'un site en choisissant le 
niveau de compatibilite du 
navigateur 
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Pensez egalement a modifier votre resolution et a faire varier la taille de 
la fenetre du navigateur. Des surprises ne manqueront pas de 
s'ensuivre... 

Ne poussez toutefois pas la precision a l'extreme : les differences entre 
navigateurs sont inevitables. Tant que le contenu reste lisible, ne 
modifiez pas votre page parce qu'un element differe legerement d'un 
autre. 

Tout au long de la phase de test, vous devrez repondre a plusieurs 
questions. Tout d'abord, celles qui concernent directement le contenu : 

Les informations detainees sur le contenu sont-elles directement 
ou rapidement disponibles ? 

Tout document doit posseder un titre. Vos titres resument-ils bien 
le contenu des pages ? 

L'esthetique des pages est-elle de bon gout ? Originale ? 
Attrayante ? 

N'y a-t-il rien qui puisse choquer inutilement un lecteur d'une 
culture differente de la votre ? 

Le raffmement de votre page d'accueil n'est-il pas excessif au 
point de penaliser lourdement le temps de chargement (image trop 
grande ou texte trop long) ? La page d'accueil signale-t-elle la 
configuration optimale pour visionner votre site ? 

Tous les liens sont-ils bien dermis ? 

Toutes les images sont-elles bien presentes ? Comptent-elles 
toutes bien un texte alternatif ? Avez-vous pense a limiter leur 
taille ? 

Vous pouvez en outre utilement verifier le bon balisage de votre 
document, soit a l'aide du service propose par le W3C a l'adresse 
http://validator.w3.org/, soit en employant leur editeur/navigateur gratuit 
Amaya. 



Y 



Emplacement 

ASH1EE 

Un site Web est susceptible de changer d' emplacement. Ce peut etre 
une decision de niveau serveur, dont vous n'etes pas maitre. Un true tout 
simple pour tester ce probleme consiste a changer votre site en 
construction de disque ou de repertoire. Vous verrez ainsi si cette 
modification pose probleme. 
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Bref, testez, testez... il en restera toujours quelque chose. 

N'oubliez jamais que le lecteur d'une presentation informatisee etablira 
toujours une correlation inconsciente entre la valeur du contenu de 
celle-ci et son aspect. 
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XHTML 

Pour convertir rapidement un document au format XHTML, vous 
pouvez vous servir de HTML Tidy ou de l'editeur/navigateur Amaya, 
qui peut enregistrer des documents HTML en XHTML. 



Reactions du public 

Vous avez concu un splendide site Web, l'avez teste par tous les moyens 
possibles. Comment toutefois savoir avec quelle efficacite votre message 
parvient au public cible ? Pour ce faire, vous devez fournir aux 
utilisateurs un moyen d'entrer en contact avec vous. 

Le premier moyen pour encourager vos visiteurs a vous faire part de 
leurs remarques consiste a placer sur chaque page un lien vers votre 
adresse electronique. Vous pouvez utilement completer cela par un lien 
situe sur votre page d'accueil, qui precise ou signaler un probleme. Nous 
l'avons fait pour notre site, grace au lien de messagerie de la barre de 
navigation (affichee sur chaque page) et au message qui figure dans la 
page d'accueil, meme si pour le moment les liens de ce message ne 
possedent pas de cible. 
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Un autre moyen consiste a proposer un formulaire en ligne, qui peut etre 
complete par les visiteurs et envoye (probablement par messagerie) au 
responsable du site. Dans notre cas, ce serait une page probleme.html. Le 
formulaire doit poser des questions precises relatives au site, ainsi que 
sur le profil du visiteur. Ces dernieres informations permettent de 
verifier que le visiteur fait bien partie de la cible choisie, tandis que les 
questions portant sur le site permettent de focaliser les critiques 
eventuelles. 

Des solutions plus avancees consistent a proposer une liste de diffusion 
ou une adresse de groupe de discussion. Une liste de diffusion envoie un 
message a toute personne presente sur la liste, les membres pouvant le 
plus souvent repondre directement a la liste. Cela peut augmenter la 
portee de votre site Web tandis que votre public pourra plus facilement 
vous faire part de ses remarques. 

Un groupe de discussion est un endroit ou des utilisateurs peuvent 
envoyer et lire des messages, regroupes par sujet ou par theme. Cela est 
tres similaire a la liste de diffusion, mais attire traditionnellement moins 
de gens : sans doute parce que les utilisateurs doivent les visiter 
activement, alors qu'ils recoivent automatiquement les messages d'une 
liste. 

Ces deux methodes demandent toutefois une mise en ceuvre plus 
complexe, qui ne sera pas abordee ici. 

Quelle que soit la facon dont vous encouragez les commentaires 
touchant votre site, repondez-y toujours rapidement. Si quelqu'un vous 
ecrit pour vous demander une URL, envoyez-la le jour meme ou 
repondez que vous ne savez pas ou la trouver. N'hesitez jamais a avouer 
que vous ignorez quelque chose, mais essayez d'aller trouver la reponse. 



1 1 .5. Publication sur le Web 

La derniere etape, et paradoxalement la plus simple, consiste a placer 
votre site sur le Web. Pour le moment, vous possedez un site en 
construction, stocke quelque part sur votre disque dur. Pour continuer, 
vous avez besoin d'un hebergeur et d'un outil capable de transferer les 
fichiers qui composent votre site sur le serveur de cet hebergeur. 

Le probleme se pose differemment pour une entreprise dotee de son 
propre reseau (et qui dispose probablement d'un ou de plusieurs 
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serveurs hebergeant son intranet et son site Web externe), pour une 
entreprise passant par l'intermediaire d'un fournisseur d'acces Internet 
(FAI) specialise et pour un individu ou une PME pouvant se contenter 
des services d'un FAI grand public. C'est a ce dernier cas que nous nous 
interessons particulierement. 

Peut-etre l'ignorez-vous, mais si vous disposez d'un acces Internet, vous 
possedez probablement un hebergeur. La quasi-totalite des FAI mettent 
gracieusement a votre disposition un espace de stockage capable 
d'heberger vos pages personnelles. La place offerte se compte desormais 
en centaines de megaoctets, un chiffre excedant en principe largement 
les besoins d'un site personnel ou SOHO (Small Home, Home Office). 
Orange propose par exemple 100 Mo d' espace pour le stockage de vos 
pages personnelles, Free montant jusqu'a 10 Go ! 
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Figure 11.29 : Gestion des pages personnelles de Free 
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Figure 11.30 : Off re standard Orange 
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Certains FAI proposent, comme Orange, un hebergement ameliore pour 
un montant relativement modeste. 
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Figure 11.31 : Hebergement ameliore d' Orange 

Vous devrez dans la plupart des cas activer vos pages personnelles 
(votre compte de pages personnelles) aupres de votre FAI. Suivez pour 
cela les instructions fournies par celui-ci dans sa documentation ou sur 
son site. 

Vous devez ensuite disposer d'un moyen de transferer vos fichiers du 
repertoire de construction, situe sur votre disque dur, jusqu'au repertoire 
de destination, situe a une adresse fournie par votre FAI (souvent 
quelque chose comme votrenom.perso-ftp, votreFAI.fr ou 
votrenom.perso.votreFAI.fr). Cela s'effectue a l'aide d'un 
protocole nomme FTP (File Transfer Protocole), si bien que les logiciels 
capables d'accomplir ce travail portent le nom de « logiciels FTP ». 

Certains editeurs HTML proposent des fonctions FTP integrees pour le 
transfert et F administration de votre site Web. Si ce n'est pas le cas de 
votre editeur favori, il vous reste, selon les FAI, deux solutions : 

WebFTP : cette methode relativement recente proposee par 
certains FAI (dont Neuf-Telecom) est similaire au WebMail, ce 
systeme qui vous permet de consulter vos courriers sans logiciel 
de messagerie dedie, depuis n'importe quel navigateur. 
Generalement tres intuitive, c'est une methode elegante. 
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Logiciels FTP independants : il en existe un grand nombre, 
certains gratuits, certains sous forme de partagiciels (shareware), 
d'autres enfin etant commerciaux. Votre FAI propose 
generalement dans sa boite a outil un tel produit (Cuteftp pour 
Orange, LeechFtp sous Windows ou Fetch sous MacOS proposes 
sur le kit de connexion de Free, mais il en existe bien d'autres, 
comme vous le montrera une simple recherche Google). Citons 
notament Filezilla, de la grande famille des logiciels libres 
gratuits (www.filezilla-project.org). 
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Figure 11.32 : Une recherche Google avec comme mots-cles 
« logiciel FTP »+ « gratuit » procure plus de 6 BOO reponses 

Si vous avez choisi de telecharger et d'installer un logiciel FTP, vous 
devez le configurer. Pour ce faire, vous devez toujours lui indiquer : 

L'adresse du serveur FTP. C'est generalement quelque chose 
comme perso-ftp.i/ofreF>4/.fr 

Votre identifiant et votre mot de passe de messagerie. 

L'emplacement de vos pages sur votre disque dur (le site local). 

Ces informations vous sont fournies par votre FAI. 

Selon le logiciel, d'autres informations peuvent vous etre demandees : 

Le type d'hote. Cette information vous est fournie par votre FAI. 
C'est sou vent UNIX (standard). 

Un nom pour la connexion. Pratique si ce logiciel doit servir a 
vous connecter a plusieurs serveurs STP 
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L'adresse de votre site. C'est souvent quelque chose comme 

http : //per so . votreFAI . f r/votrenom/ OU votrenom.perso 
.votreFAI . fr. 

Les copies d'ecran qui suivent montrent les informations demandees par 
WS_FTP95 LE, mon logiciel FTP favori (bien qu'ancien). 
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Figure 11.33 : 

Informations de connexion 
demandees par WS_FTP95 LE 



Figure 11.34 : 

Informations de connexion 
demandees par WS_FTP95 LE 

Vous voyez en principe, dans la fenetre du logiciel, deux volets. Le volet 
de gauche presente les fichiers situes dans le dossier specifie lors de la 
configuration du logiciel. Si ce n'est pas le bon dossier, vous pouvez 
naviguer sur votre ordinateur jusqu'a afficher le dossier contenant les 
fichiers de votre site. 

Etablissez la connexion si elle ne Test pas deja (la methode peut differer 
selon le logiciel). Le cadre de droite affiche les fichiers et dossiers 
actuellement situes sur le serveur distant : ceux effectivement consultes 
par des visiteurs. 
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Figure 11.35 : Fenetre de WS_FTP95 LE, affichant les dossiers de MonSite 
et ceux situes sur le serveur distant. 

Pour transferer des fichiers, selectionnez-les dans le volet de gauche et 
lancez le transfert, par exemple en cliquant sur un bouton. 
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Figure 11. 3G : Selection et transfert de fichiers 

Un message d'etat du transfert des fichiers est generalement affiche. 

Patientez quelques instants et allez visiter votre site, en lancant votre 
navigateur et en saisissant l'adresse de votre site. 

Ce meme logiciel permet de gerer votre site a distance. Vous pouvez a 
tout moment aj outer de nouveaux fichiers ou en supprimer. Pour 
supprimer un fichier distant, selectionnez-le simplement dans le cadre de 
droite et cliquez sur Supprimer ou Delete. 
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1 1 .6. Suivi de la frequentation 
de votre site 

Une fois votre site en ligne, vous souhaiterez probablement en suivre la 
frequentation d'une facon ou d'une autre. De nombreux FAI proposent 
de tels outils, parfois gratuitement, parfois moyennant finances. Leur 
emploi est parfois simple, parfois complexe. Et tout changement de FAI 
impose d'etudier un nouveau systeme... 

Une solution alternative consiste a recourir a Google Analytics, un outil 
gratuit d'une rare puissance. Voici comment en profiter : 

1 Servez-vous de votre compte Google pour ouvrir un compte 
Google Analytics, a partir de la page http://www.gOOgle.com/analytics 
/fr-FR/. 



^Jffl 


Edition Affichage Histsriqus Marqge-pagss Outils ? 




^Jfll*l 










<f - 


i* G https;//www.goog!5.comi'sndytics/home/provi5ion 


a|"| ►! H-Google 


Ih-I 



Google | Analytics 



^eljin-isTwi a'OiiijiLil.oiij M>\« Coi>t-KU;-;i:>»? 



^ I 

Ameliorez votre site et augmentez votre retour sur investissement marketing. 

Nous souhaiions vous aider a attirer un trafic qualii rnerplus de visiteurs en clients. 

Google Analytics vous aide a cornprendre quelles sont les initiatives marketing les plus reniables ei comment les visiteurs se 
comportent sur wrtre site. Informez-vous avant de modifier la conception ds vGt.rs sits, atlirszun trafi: qualifi e et augmentez vos 
conversions etvos benefices. 

Inscrivez-vous ties mainienant: e'est facile et gratuit! 

(Pages consultees lirnitees a 5 millions parrnois pour les annonceurs qui ne sort pas inscrits a AdWords.) 

&>%k > = 



;]le Analytics. 
Cliquez sur le houtan Inscription pour commence!'. 



Inscription > 



^ .- 



J 



I www.google.com ££ | Adbbck 



Figure 11.37 : Page d'accueil de Google Analytics. 

2 Dans la zone de texte S'inscrire a Google Analytics, cliquez sur 
Inscription. 
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3 Entrez l'URL du site Web que vous souhaitez suivre, puis 
nommez votre compte. C'est ce nom qui figurera dans vos 
rapports Google Analytics. Vous pourrez, si vous le souhaitez, 
ajouter d'autres sites apres la configuration de votre compte. 

4 Renseignez vos nom, prenom, numero de telephone et pays. 

5 Acceptez le contrat utilisateur et cliquez sur Creer un compte. Cela 
affiche la page Instructions de suivi. Cette page possede une zone 
de texte qui contient un fragment de code. Dans celui-ci, 
UA-xxxxxxx-x est l'identifiant unique associe a votre compte: 

<script src="http : / /www. google -anal y tics . com/ urchin . j s" 

type=" text/ javascript "> 

</script> 

<script type="text/ javascript "> 

_uacct = "UA-xxxxxxx-x"; 

urchinTracker ( ) ; 
</script> 

Ce fragment de code charge la bibliotheque urchin.js dans 1' agent 
utilisateur client, definit l'identifiant unique ( uacct), puis appelle 
urchinTracker () pour renvoyer les donnees a Google Analytics. 

Vous devez copier ce fragment de code dans chaque page Web que vous 
voulez suivre. Vous le faites en principe juste avant la balise de 
fermeture </BODY>, mais vous pouvez egalement le placer dans 
1' element HEAD, surtout si votre page est riche en code JavaScript et que 
vous constatez quelques problemes. 



A 



L activation de Google Anaytics n est pas immmediate 

ATHNTI0N . , , . v , , , , , 

L arnvee des premieres donnees dans vos rapports peut demander pres 
de 24 heures apres l'ouverture d'un compte et la saisie, puis la 
publication du code de suivi adequat. Soyez patient. . . 



Vous pouvez examiner les etats associes a votre gadget en ouvrant une 
session dans Google Analytics et en choisissant Afficher les rapports. 

La page qui s' affiche alors est le Tableau de bord (voir Figure 11.38). 

II presente six volets principaux. 

— En haut, un graphique de revolution des visites quotidiennes ; 
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Figure 11.38 : Tableau de bord Google Analytics. 

— En dessous, differentes donnees sur la Frequentation du site 
(nombre de visites sur la periode, pages vues, pages par visites, 
rapport nouveaux/anciens visiteurs etc.) ; 

— Vient ensuite une Vue d'ensemble des visiteurs, tres similaire au 
premier graphique si ce n'est qu'il concerne les visiteurs et non 
les visites, et une Synthese geographique : une carte du monde 
ou l'intensite de la couleur est proportionnelle au nombre de 
visiteurs de meme d'origine geographique. 

— Le dernier groupe presente une Vue d'ensemble des sources de 
trafic (un camembert qui montre par quel moyen les visiteurs sont 
parvenus a votre site) et une Vue d'ensemble du contenu (les 
pages les plus vues). 

Vous pouvez egalement eventuellement voir un graphique de Vue 
d'ensemble des objectifs, si vous avez denni un objectif dans les 
parametres d' analyse. 

II suffit de cliquer sur le lien Afficher le rapport d'un des volets ou sur un 
element pour afficher ses details. L'acces est egalement possible a partir 
du menu de gauche. II est impossible de tout detailler : cela necessiterait 
un ouvrage entier ! 

Interessons-nous plutot a l'element Visiteurs : cliquez a gauche sur 
Visiteurs ou sur Afficher le rapport du volet Vue d'ensemble des visiteurs. 
Cela affiche une nouvelle page qui fourmille d' informations 
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interessantes (Segmentation des visiteurs, Profit des visiteurs dont langue(s), 
Fournisseurs d'acces et Valeurs personnalisees, Type de navigateur 
[navigateurs, systemes d' exploitation, navigateur et systemes 
d'exploitation, couleurs d'ecran, resolutions d'ecran, types de prise en 
charge de Java, Flash] et Synthese geographique) 
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Figure 11.39 : Page Vue d 'ensemble des visiteurs 

Cliquons dans le volet Navigateurs de la section Profit technique sur 
Afficher le rapport complet. Cela peut permettre de verifier certains 
postulats emis precedemment. Je precise toutefois que cela ne s' applique 
qu'a mon site, dont les 5833 visiteurs constates sur environ l an ne 
constituent pas forcement un echantillon representatif du Web. En 
revanche, c'est sans aucun doute "mon" public. 
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Figure 11.40 : 

Navigateurs 

Mes visiteurs possedent dans 68,8 % des cas Internet Explorer, et 
Firefox dans 24,4 % des cas. Vous pouvez cliquer sur le nom d'un 
navigateur pour voir des details sur ses versions : ainsi, Internet 
Explorer 6 etait encore employe dans 50,7 % des cas, soit par environ 
35 % de mes visiteurs. II n'existe quasiment plus de versions anterieures 
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(0,5 %). En revanche, les utilisateurs de Firefox semblent plus enclins a 
rester a jour, car 97 % d'entre eux possedent au moins la version 2.0.0.1. 

Cliquons ensuite dans le menu de gauche sur Systemes d'exploitation. 
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Figure 11.41 : 

Versions de la 
plate-forme. 

Leur systeme d'exploitation est Windows dans 92 % des cas. II devient 
interessant de regarder la combinaison navigateur/plate-forme en 
cliquant dans le menu de gauche sur Navigateurs et systemes 
d'exploitation pour disposer d'une idee plus precise de leurs 
caracteristiques. 




Figure 11.42 : 

Combinaisons 
Navigateur et 
Plate-forme. 



Internet Explorer sur Windows 68,7 % de mes visiteurs, suivi de Firefox 
sur Windows (23 %). Safari sur Macintosh atteint les 5 %, suivi de 
Firefox toujours sur Macintosh (l %). Les autres combinaisons restent 
anecdotiques, ne totalisant que 3 % des visiteurs. 
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Figure 11.43 : 

Resolutions d'ecran. 
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Seuls (mais encore) 4,4 % des visiteurs possedent une resolution de 
800 x 600 pixels. 43,7 % disposent d'une resolution de 1024 x 768, les 
autres possedant une resolution superieure. Si je dois done toujours 
prevoir une resolution minimale de 800 x 600, les choses risquent 
d'evoluer rapidement. . . 

Ces informations sont precieuses : elles confirment que je ne puis me 
dispenser de tester mes pages a l'aide au moins d' Internet Explorer 6 et 
7 et de Firefox 2. 

Google Analytics apparait done comme un outil precieux, presque 
indispensable. Ne vous en privez pas ! 



11.7. Resume 



Des le debut de la phase de conception de votre site, vous devez 
garder a l'esprit les caracteristiques de la cible visee et, pour ce 
faire, identifier votre public : 

_ Les enfants preferent des images claires et colorees et sont 
souvent capables de comprendre le but d'une icone sans avoir 
a lire le texte. 

— Les personnes agees peuvent souffrir de deficits visuels et 
eprouver des difficultes a employer le clavier ou la souris. 

— Un public d' amateurs de jeux video apprecie particulierement 
les images et les videos. 

Les cadres rendent la navigation difficile sans souris et ne sont pas 
reconnus par les navigateurs textuels. 

Les images posent rarement de problemes si vous avez pense a 
placer un attribut alt dans 1' element IMG pour permettre aux 
utilisateurs ayant desactive les images d'en obtenir une 
description. 

Les tableaux sont assez mal reconnus par les navigateurs textuels. 
Servez-vous toujours du nouvel attribut summary pour procurer 
une alternative texte au tableau. Pour une cellule de donnees 
particuliere, l'attribut headers repertorie les cellules qui 
fournissent des indications de rubrique pertinentes. Pour une 
cellule de rubrique donnee, l'attribut scope indique a l'agent 
utilisateur les cellules concernees par ces indications de rubrique. 
Enfin, l'attribut abbr specifie un nom de rubrique abrege pour les 
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cellules de rubrique, afin que les agents utilisateurs puissent 
restituer plus rapidement les indications de rubrique. 

Les jeux d'encadrement font egalement partie des structures 
delicates a interpreter par les agents utilisateurs non visuels. La 
seule solution consiste a employer un element NOFRAME et a 
fournir un lien alternatif vers une version depourvue de cadres. 

Les modules complementaires (ou plug-in) sont de petits 
programmes qui permettent d'afficher dans le navigateur des 
types de contenu normalement non affichables. Les plus celebres 
sont Adobe Acrobat Reader, Shockwave, JVM (Java Virtual 
Machine), QuickTime et RealAudio. Ces types de contenu sont 
inseres dans une page Web a l'aide de l'element OBJET. 

L' ensemble de caracteres Unicode desormais adopte par HTML 
dispose de plus de 25 000 caracteres differents et est capable de 
representer les langues du monde entier. 

Vous specifiez la langue d'un element HTML a l'aide de son 
attribut lang. Celui-ci recoit comme valeur un code qui identifie 
une langue parlee, ecrite, ou utilisee d'une maniere ou d'une autre 
pour la communication d' informations entre personnes. 

L'attribut dir specifie la direction de base d'un texte depourvu de 
directionnalite inherente telle que defmie dans la norme Unicode, 
ainsi que la directionnalite des tableaux. II ne semble toutefois pas 
etre tres reconnu par les navigateurs actuels. 

II est possible de desactiver l'algorithme bidirectionnel Unicode 
et de specifier une directionnalite a l'aide de l'element BDO 
(BiDirectional Override). Cet element possede un attribut obligatoire 
dir, identique au precedent, mais qui prevaut sur la 
directionnalite inherente des caracteres telle que defmie dans 
Unicode. 

Si vous realisez une page dans une langue autre qu'europeenne, 
vous devez modifier le jeu de caracteres du document a l'aide de 
l'attribut charset d'un element META. De nombreux navigateurs 
permettent d'imposer le choix du type d'encodage de la page. 

II faut toujours tester un site Web avec autant de navigateurs que 
possible, et au minimum sous Internet Explorer 5.0 et 6.0 et sous 
Firefox. 

Vous devez egalement effectuer un test avec ces navigateurs en 
desactivant l'affichage des images. 
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Vous pouvez trouver sur le Net des sites de test, comme 
AnyBrowser.com. Vous pouvez y effectuer un test en specifiant un 
niveau de compatibilite avec les specifications HTML et meme 
tester un affichage WebTV. 

Vous devez fournir aux utilisateurs un moyen d'entrer en contact 
avec vous et les encourager a vous faire part de leurs remarques. 

Pour placer effectivement votre site sur le Web, vous avez besoin 
d'un hebergeur et d'un outil capable de transferer les fichiers qui 
composent votre site sur le serveur de cet hebergeur. La quasi- 
totalite des FAI mettent gracieusement a votre disposition un 
espace de stockage capable d'heberger vos pages personnelles. 

Le transfert de vos fichiers du repertoire de construction jusqu'au 
repertoire de destination, situe chez l'hebergeur, s'effectue a 
l'aide d'un protocole nomme FTP (File Transfer Protocole). Les 
logiciels capables d'accomplir ce travail portent le nom de 
« logiciels FTP ». II existe de nombreux logiciels FTP gratuits, 
chaque FAI disposant de ses propres preferences. 

Google Analytics est un outil precieux qui permet de suivre avec 
une grande precision la frequentation de son site Web.. 
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12.1 . Jeu des entites de caracteres 
Latin-1 



Tableau 12.1 : Jeu des entites de caracteres Latin-1 


Caractere 


Norn de I'entite 


Codage 
decimal 


Codage 
hexadecimal 


espace 
insecable 


Snbsp; 


  &#xaO; 


j Siexcl; 


¡ &#xal; 


<t Scent; 


¢ 


¢ 


£ Spound; 


£ 


£ 


n (symbole 
monetaire] 


Scurren; 


¤ 


¤ 


¥ 


¥ 


¥ ¥ 




&brvbar ; 


¦ ¦ 


§ 


Ssect; 


§ § 


- 


&uml ; 


¨ 


¨ 


© 


Scopy; 


© 


© 


a 


Sordf ; 


ª ª 


« 


Slaquo; « « 


[signe 
negation) 


Snot; 


¬ 


Sfxac; 


- [trait 

d'union 

virtuel] 


Sshy; ­ 


­ 


® 


® ® 


Sfxae; 


(macron) Smacr; ¯ 


Stxaf ; 


° ° 


&#xbO; 
&#xbl; 


+ Splusmn; &#17 7; 


2 ² ² 


² 


3 ³ ³ 


³ 


Sacute; ´ ´ 
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Tableau 12.1 : Jeu des entites de caracteres Latin-1 


Caractere 


Norn de I'entite 


Codage Codage 
decimal hexadecimal 


M 


Smicro; 


6#181 


µ 


■^■(pied de 
mouche] 


Spara; 


&#182 


¶ 




Smiddot; 


&#183 


· 




6ced.il; 


&#184 


¸ 


i 


6supl; 


&#185 


¹ 





Sordm; 


&#186 


º 


» 


Sraquo; 


&#187 


» 


Va 


6fracl4; 
&f racl2 ; 


&#188 


¼ 


&#189 


½ 


% 


¾ 


&#190 


¾ 


6 


Siquest; 


6#191 


¿ 


A 


SAgrave; 


&#192 


&#xcO; 


A 


SAacute; 


&#193 


6#xcl; 


A 


Â 


&#194 


Â 


A 


SAtilde; 


&#195 


Ã 


A 


SAuml ; 


&#196 


Ä 


A 


6Aring; 


&#197 


Å 


/E 


SAElig; 


&#198 


Æ 


c 


SCcedil; 


&#199 


Ç 


E 


SEgrave; 


&#200 


È 


E 
E 


SEacute; 
6Ecirc; 


&#201 


É 


&#202 


6#xca; 


E 


SEuml; 


&#203 


Ë 


1 


SIgrave; 


&#204 


6#xcc; 


1 


Slacute; 


&#205 


Í 


T 


Î 


&#206 


6#xce; 
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Tableau 12. 1 : 


Jeu des entites de caracteres Latin-1 


Caractere 


Norn de I'entite Codage Codage 

decimal hexadecimal 


T 


Sluml; 


&#207 


Slxcf 




E 


Ð 


&#208 


&#xdO 




N 


SNtilde; 


&#209 


&#xdl 







SOgrave; 


&#210 


&#xd2 







SOacute; 


S#211 


&#xd3 







SOcirc; 


&#212 


&#xd4 







SOtilde; 


&#213 


&#xd5 







SOuml; 


&#214 


&#xd6 




X 


Stimes; 


&#215 


&#xd7 







SOslash; 


&#216 


&#xd8 




U 


SUgrave; 


&#217 


&#xd9 




U 


SUacute; 


&#218 
&#219 
&#220 


&#xda 




u 
u 


SUcirc; 
SUuml; 


&#xdb 




&#xdc 




Y 


SYacute; 


&#221 


&#xdd 




t> 


&THORN ; 


&#222 


&#xde 




13 


Sszlig ; 


&#223 


&#xdf 




a 


Sagrave; 


&#224 


&#xeO 




a 


Saacute; 


&#225 


&#xel 




a 


Sacirc; 


&#226 


&#xe2 




a 


Satilde; 


&#227 


&#xe3 




a 


Sauml; 


&#228 


&#xe4 




a 


Saring; 


&#229 


&#xe5 




ae 


Saelig; 


&#230 


&#xe6 




P 


Sccedil; 


&#231 


&#xe7 




e 


Segrave; 


&#232 


&#xe8 




e 


Seacute; 


&#233 


&#xe9 
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Tableau 12.1 : Jeu des entites de caracteres Latin-1 


Caractere Nam de I'entite 


Codage Codage 
decimal hexadecimal 


e Secirc ; 


&#234 


Sfxea; 


e Seuml; 


&#235 


ë 


l & i grave ; 


&#236 


Sfxec; 


l Siacute; 


&#237 


í 


T Sicirc; 


&#238 


Sfxee; 


T Siuml; 


&#239 


&#xef ; 


d ð 


&#240 


&#xfO; 


n Sntilde; 


&#241 


&#xfl; 


6 Sograve; 
6 Soacute; 


&#242 


ò 


&#243 


ó 


o Socirc ; 


&#244 


ô 


6 Sotilde; 


&#245 


õ 


Souml; 


&#246 


ö 


+ Sdivide; 


&#247 


÷ 


Soslash; 


&#248 


ø 


u Sugrave; 


&#249 


ù 


u Suacute; 
u Sucirc; 
u Suuml; 


&#250 


ú 


&#251 


ྴ 


&#252 


ü 


y Syacute; 


&#253 


ý 


p" Sthorn; 


&#254 


þ 


y ÿ 


&#255 


ÿ 



12.2. Elements et attributs HTML 4.01 

Vous trouverez ici la totalite des elements et attributs proposes par la 
specification HTML 4.01, classes par ordre alphabetique. 
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Elements HTML 4.01 

A : ancre 

accesskey : touche d'acces rapide. %Character; 

char set : jeu de caracteres de la ressource liee. %Charset; 

coords : employe avec les cartes cote client. %Coords; 

href : URI de la ressource liee. %URI; 

hreflang : code de la langue. %LanguageCode; 

name : fin de lien nomme. CDATA 

onblur : l'element a perdu le focus. %Script; 

onfocus : l'element a obtenu le focus. %Script; 

rel : types de liens avant. %LinkTypes; 

rev : types de liens arriere. %LinkTypes; 

shape : employe avec les cartes cote client. % Shape; 

tabindex : position dans l'ordre de tabulation. NUMBER 

target : afficher dans ce cadre (DTD Frameset). %FrameTarget; 

type : type de contenu. %ContentType; 

ABBR : abreviation (www, HTTP, etc.) 

ACRONYM : acronyme 

ADDRESS : informations sur l'auteur 

APPLET : applet Java (deconseille, DTD Transitoire) 

align : alignement vertical ou horizontal (deconseille). %IAlign; 

alt : description breve (deconseille). %Text; 

archive : liste d'archives, separees par des virgules (deconseille). 

CDATA 

code : fichier de classes de l'applet (deconseille). CDATA 

codebase : URI facultatif de base pour l'applet (deconseille). %URI; 

height : hauteur initiale (deconseille). % Length; 

hspace : intervalle horizontal (deconseille). %Pixels; 

name : permet aux applets de se retrouver mutuellement (deconseille). 

CDATA 

object : fichier d'applet serialise (deconseille). CDATA 

vspace : intervalle vertical (deconseille). %Pixels; 

width : largeur initiale (deconseille). %Length; 

AREA : image cliquable cote client 

accesskey : touche d'acces rapide. %Character; 

alt : description breve. %Text; 

coords : liste de longueurs separees par des virgules. %Coords; 
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href : URI de la ressource liee. %URI; 

nohref : cette region est sans action, (nohref ) 

onblur : l'element a perdu le focus. %Script; 

onfocus : l'element a obtenu le focus. %Script; 

shape : controle 1' interpretation des coordonnees. % Shape; 

tabindex : place dans l'ordre de tabulation. NUMBER 

target : afficher dans ce cadre (DTD Frameset). %FrameTarget; 

B : texte en style gras 

BASE : URI de base du document 

href : URI se comportant comme URI de base. %URI; 

target : afficher dans ce cadre (DTD Frameset). %FrameTarget; 

BASEFONT : taille de la police de base (deconseille, DTD transitoire) 

color : couleur du texte (deconseille). %Color; 

face : liste de noms de police, separes par des virgules (deconseille). 

CDATA 

size : obligatoire. Taille de police de base des elements FONT 

(deconseille). CDATA 

BDO : inactivation de l'aigorithme I18N BiDi 
dir : direction (obligatoire). (ltr | rtl) 

BIG : texte agrandi 

BLOCKQUOTE : citation longue 

cite : URI du document source ou message. %URI; 

BODY : corps du document 

alink : couleur des liens selectionnees (deconseille). %Color; 

background : image d'arriere-plan du document (deconseille). %URI; 

bgcolor : couleur d'arriere-plan du document (deconseille). % Color; 

link : couleur des liens (deconseille). %Color; 

onload : le document a ete charge. %Script; 

onunload : le document a ete supprime. %Script; 

text : couleur du texte du document (deconseille). %Color; 

vlink : couleur des liens visites (deconseille). %Color; 

BR : saut de ligne 

clear : controle du flux de texte (deconseille). (left I all 

right | none) 
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BUTTON : bouton 

accesskey : touche d'acces rapide. %Character; 

disabled : non disponible dans ce contexte. (disabled) 

name : nom. CDATA 

onblur : l'element a perdu le focus. %Script; 

onfocus : l'element a obtenu le focus. %Script; 

tabindex : position dans l'ordre de tabulation. NUMBER 

type : employe comme bouton de formulaire. (button | submit 

reset) 

value : valeur envoyee au serveur lors de la soumission du formulaire. 

CDATA 

CAPTION : legende de tableau 

align : alignement relatif du tableau (deconseille). %CAlign; 

CENTER: raccourci pour DIV align="center" (deconseille, DTD 
transitoire) 

CITE : citation 

CODE : fragment de code informatique 

COL : colonne de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

char : caractere d'alignement, par exemple char=' : ' .%Character; 

charof f : decalage du caractere d'alignement. %Length; 

span : les attributs de COL affectent n colonnes. n (nombre) 

valign : alignement vertical dans les cellules, (top | middle 

bottom | baseline) 

width : specification de la largeur des colonnes. %MultiLength; 

COLGROUP : groupe de colonnes de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

char : caractere d'alignement, par exemple char=' : ' . %Character; 

charof f : decalage du caractere d'alignement. %Length; 

span : nombre de colonnes par defaut dans un groupe. NUMBER 

width : largeur par defaut des COL concernees (imbriquees). 

%MultiLength; 

valign : alignement vertical dans les cellules, (top | middle 

bottom I baseline) 
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DD : description de definition 

DEL : texte supprime 

cite : information sur le motif de la modification. 

datetime : date et heure de modification. %Datetime; 

DFN : definition d'instance 

DIR : liste de repertoire (deconseille, DTD transitoire) 

compact : reduction de l'espace entre elements (deconseille). 

(compact) 

DIV : conteneur de langue/style generique 

align : alignement du texte (deconseille). (left | center | right 
justify) 

DL : liste de definitions 

compact : reduction de l'espace entre elements (deconseille). 

(compact) 

DT : terme de definition 

EM : emphase 

FIELDSET : groupe de controles de formulaire 

FONT : modification(s) locale(s) d'une police (deconseille, DTD 

transitoire) 

color : couleur du texte (deconseille). %Color; 

face : liste de noms de police, separes par une virgule (deconseille). 

CDATA 

size : par exemple size=" + l", size="4" (deconseille). [+|-]nn, 

FORM : formulaire interactif 

accept-charset : liste des jeux de caracteres pris en charge. 
%Charsets; 

accept : liste des types MIME pour le telechargement de fichiers. 
%ContentTypes ; 

action : mode de gestion des formulaires cote serveur (obligatoire). 
%URI; 

enctype : type d'encodage. %ContentType; 

method : methode HTTP employee pour soumettre le formulaire. (GET 
POST) 
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name : nom du formulaire (employe dans des scripts). CDATA 
onreset : le formulaire a ete reinitialise. %Script; 
onsubmit : le formulaire a ete soumis. %Script; 
target : afficher dans ce cadre . %FrameTarget; 

FRAME : sous-cadre (fenetre secondaire) (DTD Frameset) 
longdesc : lien vers une description longue, completant le titre. %URI; 
marginheight : marge haute en pixels. %Pixels; 
marginwidth : marge basse en pixels. %Pixels; 
noresize : l'utilisateur peut-il modifier la faille des cadres? 
(noresize) 

frameborder : presence ou absence de bordure pour le cadre. 1 | 0) 
name : nom du cadre pour pouvoir le cibler. CDATA 
scrolling : presence ou absence des barres de defilement du cadre. 
(yes | no | auto) 
src : source du contenu du cadre. %URI; 

FRAMESET : subdivision de fenetre (DTD Frameset) 

cols : liste de longueurs, par defaut 100% (1 colonne) (DTD 

Frameset). %MultiLengths; 

onload : tous les cadres ont ete charges (DTD Frameset). % Script; 

onunload : tous les cadres ont ete supprimes (DTD Frameset). 

%Script; 

rows : liste de longueurs, par defaut 100 % (1 ligne) (DTD Frameset). 

%MultiLengths; 

Hn : titre de niveau n (n compris entre 1 et 6) 

align : alignement du texte (deconseille). (left I center I right I justify) 

HEAD : en-tete de document 

profile : dictionnaire nomme de meta- informations. %URI; 

HR : ligne horizontale 

align : alignement du texte (deconseille). (left | center 

right) 

noshade : ombrage (deconseille). (noshade) 

size : faille en pixels (deconseille). % Pixels; 

width : largeur (deconseille). %Length; 

HTML : element racine du document 

version : constante (deconseille). %HTML Version; 

I : texte de style italique 
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IFRAME : sous-fenetre en ligne (DTD Transitoire) 

align : alignement vertical ou horizontal (deconseille). %IAlign; 

height : hauteur du cadre. %Length; 

longdesc : lien vers une description longue, completant le titre. 

%URI; 

marginheight : hauteur des marges en pixels. %Pixels; 

marginwidth : largeur des marges en pixels. %Pixels; 

width : largeur du cadre. % Length; 

frameborder : presence ou absence de bordure de cadre. (1 | 0) 

name : nom du cadre pour pouvoir le cibler. CDATA 

scrolling : presence ou absence des barres de defilement du cadre. 

(yes | no | auto) 

src : source du contenu du cadre. %URI; 

IMG : image incorporee 

align : alignement vertical ou horizontal (deconseille). %IAlign; 

alt : description breve (recommande). %Text; 

border : largeur de la bordure du lien (deconseille). %Pixels; 

ismap : emploi de carte image cote serveur. (ismap) 

height : hauteur d'outrepassement. %Length; 

hspace : decalage horizontal (deconseille). %Pixels; 

longdesc : lien vers une description longue (completant alt). 

name : nom de l'image (pour un script). CDATA 

src : URI de l'image a incorporer (obligatoire). %URI; 

usemap : emploi de carte image cote client. %URI; 

vspace : decalage vertical (deconseille). %Pixels; 

width : largeur d'outrepassement. %Length; 

INPUT : controle de formulaire (saisie) 

accept : liste des types MIME pour le telechargement de fichiers. 

%ContentTypes ; 

accesskey : touche d'acces rapide. %Character; 

align : alignement vertical ou horizontal (deconseille). %IAlign; 

alt : description breve. 

checked : pour les boutons d'option et les cases a cocher. (checked) 

disabled : indisponible dans ce contexte. (disabled) 

i smap : emploi de carte image cote serveur. ( i smap ) 

maxlength : nombre maximum de caracteres d'un champ texte. 

NUMBER 

name : soumission comme partie d'un formulaire. CDATA 

onblur : l'element a perdu le focus. %Script; 

onchange : la valeur de l'element a ete modifiee. %Script; 

onfocus : l'element a obtenu le focus. %Script; 
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onselect : du texte a ete selectionne. %Script; 

readonly : pour du texte et un mot de passe, (readonly) 

size : specifique a chaque type de champ. CDATA 

src : pour les champs a image. %URI; 

tabindex : position dans l'ordre de tabulation. NUMBER 

type : le type de widget necessaire. %InputType; 

usemap : emploi d'une carte image cote client. %URI; 

value : specifique aux boutons d'option et cases a cocher. CDATA 

INS : texte insere 

cite : information sur le motif de la modification. %URI; 

datetime : date et heure de la modification. %Datetime; 

ISINDEX : invite a ligne unique (deconseille, DTD transitoire) 
prompt : message d'invite (deconseille). %Text; 

KBD : texte devant etre saisi par l'utilisateur 

LABEL : liberie d'un champ de formulaire 
accesskey : touche d'acces rapide. %Character; 
for : correspond a la valeur d'lD d'un champ. 
onblur : l'element a perdu le focus. %Script; 
onfocus : l'element a obtenu le focus. %Script; 

LEGEND : legende d'un ensemble de champs 

accesskey : touche d'acces rapide. %Character; 

align : alignement relatif d'un ensemble de champs (deconseille). 

%LAlign; 

LI : element de liste 

type : style d'un element de liste (deconseille). %LI style; 

value : reinitialisation du numero de sequence (deconseille). NUMBER 

LINK : lien independant du media 

charset : jeu de caracteres de la ressource liee. %Charset; 

href : URI de la ressource liee. %URI; 

media : pour l'affichage sur un media precis. %MediaDesc; 

target : afficher dans ce cadre (DTD Frameset). %FrameTarget; 

hreflang : code de langue. %LanguageCode; 

rel : type de lien avant. %LinkTypes; 

rev : type de lien arriere. %LinkTypes; 

type : type de contenu indicatif. %ContentType; 
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MAP : image cliquable cote client 

name : servant de reference a usemap (obligatoire). CDATA 

MENU : liste de menu (deconseille, DTD transitoire) 

compact : espace entre elements reduit (deconseille). (compact) 

META : meta-information generique 

content : information associee (obligatoire). CDATA 

http-equiv : nom de l'en-tete de reponse HTTP. NAME 

name : nom de la meta-information. NAME 

scheme : selection d'une forme de contenu. CDATA 

NOFRAMES : conteneur de contenu alternatif pour un affichage non 
fonde sur des cadres (DTD Frameset) 

NOSCRIPT : conteneur de contenu alternatif pour un affichage non 
fonde sur des scripts 

OBJECT : objet incorpore generique 

align : alignement vertical ou horizontal (deconseille). %IAlign; 

archive : liste d'URI separees par des espaces. CDATA 

border : largeur de la bordure du lien (deconseille). %Pixels; 

classid : identifie une mise en oeuvre. %URI; 

codebase : URI de base pour classid, data, archive. %URI; 

codetype : type de contenu pour code. %ContentType; 

data : reference vers les donnees de l'objet. %URI; 

declare : declaration d'un drapeau sans l'initialiser. (declare) 

height : hauteur d'outrepassement. %Length; 

hspace : intervalle horizontal (deconseille). %Pixels; 

name : soumettre comme partie d'un formulaire. CDATA 

standby : message a afficher lors du chargement. %Text; 

tabindex : position dans l'ordre de tabulation. NUMBER 

type : type de contenu pour data. %ContentType; 

usemap : emploi d'une carte image cote client. %URI; 

vspace : intervalle vertical (deconseille). %Pixels; 

width : largeur d'outrepassement. %Length; 

OL : liste ordonnee 

compact : reduction de l'intervalle entre elements (deconseille). 

(compact) 

start : debut du numero de sequence (deconseille). NUMBER 

type : style de numerotation (deconseille). %OLStyle; 



LE GUIDE COMPLET 499 



Annexes 



OPTGROUP : groupe d'options 

disabled : indisponible dans ce contexte. (disabled) 

label : employe dans les menus hierarchiques (obligatoire). %Text; 

OPTION : option pouvant etre selectionnee 
disabled : indisponible dans ce contexte. (disabled) 
label : employe dans les menus hierarchiques. %Text; 
selected : option preselectionnee. (selected) 
value : par defaut, le contenu de l'element. CDATA 

P : paragraphe 

align : alignement du texte (deconseille). (left | center | right 
justify) 

PARAM : valeur de propriete nommee 

name : nom de la propriete (obligatoire). CDATA 

type : type de contenu pour la valeur lorsque valuetype=ref. 

% Content Type; 

value : valeur de la propriete. CDATA 

valuetype : mode d' interpretation de la valeur. (DATA | REF 

OBJECT) 

PRE : texte preformate 

width : (deconseille). NUMBER 

Q : courte citation en ligne 

cite : URI du document source ou message. %URI; 

S : texte de style barre (deconseille, DTD transitoire) 

SAMP : exemple de sortie de programme, scripts, etc. 

SCRIPT : instructions de script 

charset : jeu de caracteres de la ressource liee. %Charset; 

defer : l'agent utilisateur peut interrompre l'execution du script. 

(defer) 

language : nom de langage de script predefini (deconseille). CDATA 

src : URI d'un script externe. %URI; 

type : type de contenu du langage de script (obligatoire). 

% Content Type; 

SELECT : selecteur d'option 

disabled : indisponible dans ce contexte. (disabled) 
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multiple : la valeur par defaut est une selection simple, (multiple) 

name : nom du champ. CDATA 

onblur : l'element a perdu le focus. %Script; 

onfocus : l'element a obtenu le focus. %Script; 

size : lignes visibles. NUMBER 

tabindex : position dans l'ordre de tabulation. NUMBER 

onchange : la valeur de l'element a ete modifiee. %Script; 

SMALL : texte en style diminue 

SPAN : conteneur de langue/style generique 

STRIKE : texte barre (deconseille, DTD transitoire) 

STRONG : emphase forte 

STYLE : informations de style 

media : concu pour l'emploi avec ces medias. %MediaDesc; 

type : type de contenu du langage de style (obligatoire). 

%Con ten t Type; 

SUB : indice 

SUP : exposant 

TABLE : tableau 

align : position relative du tableau dans la fenetre (deconseille). 

%TAlign; 

bgcolor : couleur d'arriere-plan des cellules. %Color; 

border : controle la largeur de la bordure autour du tableau. %Pixels; 

cellpadding : espacement entre cellules. %Length; 

cellspacing : espacement entre cellules. %Length; 

frame : les parties du cadre a afficher. %TFrame; 

rules : lignes entre lignes et colonnes. %TRules; 

summary : but/structure pour une sortie parlee. %Text; 

width : largeur du tableau. %Length; 

TBODY : corps de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

char : caractere d'alignement, par exemple char=' : ' . %Character; 



LE GUIDE COMPLET 5D1 



!hapitre 12 



Annexes 



charof f : decalage pour le caractere d'alignement. %Length; 
valign : alignement vertical dans les cellules, (top I middle I bottom I 
baseline) 

TD : cellule de donnees de tableau 
abbr : abreviation pour les cellules d'en-tete. %Text; 
align : alignement (deconseille). (left | center | right | 
justify | char) 

axis : liste separee par des virgules d'en-tetes apparentes. 
bgcolor : couleur d'arriere-plan d'une cellule (deconseille). %Color; 
char : caractere d'alignement, par exemple char=' : ' . %Character; 
charof f : decalage pour le caractere d'alignement. %Length; 
colspan : nombre de colonnes fusionnees. NUMBER 
headers : liste d'lD des cellules d'en-tete. IDREFS 
height : hauteur de la cellule (deconseille). %Length; 
nowrap : suppression du retour a la ligne automatique (deconseille). 
(nowrap) 

rowspan : nombre de lignes fusionnees dans une cellule. NUMBER 
scope : portee des cellules d'en-tete. %Scope; 

valign : alignement vertical dans les cellules, (top | middle 
bottom | baseline) 
width : largeur de la cellule (deconseille). %Length; 

TEXTAREA : champ texte a lignes multiples 

accesskey : touche d'acces rapide. %Character; 

cols : nombre de colonnes (obligatoire). NUMBER 

disabled : indisponible dans ce contexte. (disabled) 

name : nom. #IMPLIED 

onblur : l'element a perdu le focus. %Script; 

onchange : la valeur de l'element a ete modifiee. %Script; 

onfocus : l'element a obtenu le focus. %Script; 

onselect : du texte a ete selectionne. %Script; 

readonly : lecture seule. (readonly) 

rows : nombre de lignes (obligatoire). NUMBER 

tabindex : position dans l'ordre de tabulation. NUMBER 

TFOOT : pied de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

char : caractere d'alignement, par exemple char=' : ' . %Character; 

charof f : decalage pour le caractere d'alignement. %Length; 

valign : alignement vertical dans les cellules, (top | middle 

bottom | baseline) 
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TH : cellule d'en-tete de tableau 

abbr : abreviation pour les cellules d'en-tete. %Text; 
align : alignement (deconseille). (left | center | right | 
justify | char) 

axis : liste separee par des virgules d'en-tetes apparentes. CDATA 
bgcolor : couleur d'arriere-plan d'une cellule (deconseille). %Color; 
char : caractere d' alignement, par exemple char=' : ' . %Character; 
charof f : decalage pour le caractere d' alignement. %Length; 
colspan : nombre de colonnes fusionnees par cellule. NUMBER 
headers : liste des ID des cellules d'en-tete. IDREFS 
height : hauteur des cellules (deconseille). %Length; 
nowrap : suppression du passage automatique a la ligne (deconseille). 
(nowrap) 

rowspan : nombre de lignes fusionnees par cellule. NUMBER 
scope : portee des cellules d'en-tetes. %Scope; 
valign : alignement vertical dans les cellules, (top | middle 
bottom | baseline) 
width : largeur des cellules (deconseille). % Length; 

THEAD : en-tete de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

char : caractere d' alignement, par exemple char=' : ' . %Character; 

charof f : decalage pour le caractere d' alignement. %Length; 

valign : alignement vertical dans les cellules, (top | middle 

bottom | baseline) 

TITLE : titre du document 

TR : ligne de tableau 

align : alignement (deconseille). (left | center | right | 

justify | char) 

abbr : abreviation pour les cellules d'en-tete. %Text; 

bgcolor : couleur d'arriere-plan pour une ligne (deconseille). %Color; 

char : caractere d' alignement, par exemple char=' : ' . %Character; 

charof f : decalage du caractere d'alignement. %Length; 

valign : alignement vertical dans les cellules, (top | middle 

bottom | baseline) 

TT : texte de style telescripteur, a espacement fixe 

U : texte souligne (deconseille, DTD transitoire) 
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UL : liste non ordonnee (liste a puces) 

compact : reduction de l'espace entre elements (deconseille). 

(compact) 

type : style de puces (deconseille). %ULStyle; 

VAR : instance de variable ou argument de programme 

Attributs HTML 4.01 

A 

abbr : Abreviation pour cellule de rubrique. %Text;. Elements TD et 

TH. 

accept-charset : liste des jeux de caracteres reconnus. %Charsets;. 

Element FORM. 

accept : liste de types MIME pour chargement d'un fichier sur le 

serveur. %ContentTypes;. Elements FORM, INPUT. 

accesskey : touche d'acces rapide %Character;. Elements A, AREA, 

BUTTON, INPUT, LABEL, LEGEND, TEXTAREA. 

action : Obligatoire. Gestionnaire de formulaires cote serveur.%URl; . 

Element FORM. 

align : Alignement relatif au tableau. %CAlign;. Element CAPTION. 

align : alignement vertical ou horizontal (deconseille, DTD 

transitoire). %lAlign;. Elements APPLET, IFRAME, IMG, INPUT, 

OBJECT. 

align : relativement au jeu de champs (deconseille, DTD transitoire). 

%LAlign;. Element LEGEND. 

align : position du tableau relativement a la fenetre (deconseille, DTD 

transitoire). %TAlign;. Element TABLE. 

align : alignement (deconseille, DTD transitoire). (left | center 

right) . Element HR. 

align : alignement du texte (deconseille, DTD transitoire). (left 

center | right | justify) . Elements DIV, HI, H2, H3, H4, H5, H6, 

P. 

align : alignement (deconseille). (left | center | right 

justify | char). Elements COL, COLGROUP, TBODY, TD, TFOOT, TH, 

THEAD, TR. 

alink : couleur des liens selectionnes (deconseille, DTD transitoire). 

%Color;. Element BODY. 

alt: breve description (deconseille, DTD transitoire). %Text;. 

Element APPLET. 

alt : breve description. %Text;. Elements AREA, IMG. 
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alt : breve description. CDATA. Element INPUT. 

archive : liste d'archives separees par des virgules (deconseille, DTD 

transitoire). CDATA. Element APPLET. 

archive : liste d'URI separes par des espaces. CDATA. Element 

OBJECT. 

axis : liste des rubriques concernees separees par des virgules. CDATA. 

Elements TD, TH. 

B 

background : mosai'que de textures pour l'arriere-plan du document 

(deconseille, DTD transitoire). %URI;. Element BODY. 

bgcolor : couleur d'arriere-plan des cellules (deconseille, DTD 

transitoire). %Color;. Element TABLE. 

bgcolor : couleur d'arriere-plan des rangees (deconseille, DTD 

transitoire). %Color;. Element TR. 

bgcolor : couleur d'arriere-plan des cellules (deconseille, DTD 

transitoire). % Co lor;. Elements TD,TH. 

bgcolor : couleur d'arriere-plan du document (deconseille, DTD 

transitoire). %Color;. Element BODY. 

border : epaisseur du contour du tableau. %Pixels;. Element TABLE. 

border : epaisseur de la bordure du lien (deconseille, DTD transitoire). 

%Pixels;. Elements IMG, OBJECT. 

C 

cellpadding : espacement a l'interieur des cellules. %Length;. 

Element TABLE. 

cellspacing: espacement entre les cellules. %Length;. Element 

TABLE. 

char : caractere d'alignement, par exemple char=' : ' . %Character; . 

Elements COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. 

charof f : decalage du caractere d'alignement. %Length;. Elements 

COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR. 

charset : encodage de caracteres de la ressource reliee. %Charset;. 

Elements A, LINK, SCRIPT. 

checked : pour les boutons radio et les cases a cocher. (checked). 

Element INPUT. 

cite: URI du document ou message source. %URI;. Elements 

BLOCKQUOTE, Q. 

cite : informations sur la raison du changement. %URI ; . Elements DEL, 

INS. 

class : liste de classes separees par des espaces. CDATA. Tous les 

elements sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, 

STYLE et TITLE. 
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classid : identifie une implementation %URI;. Element OBJECT. 

clear : controle l'ecoulement du texte (deconseille, DTD 

transitoire). (left | all | right | none). Element BR. 

code : fichier de classe de 1' applet (deconseille, DTD transitoire). 

CDATA. Element APPLET. 

codebase : URI de base pour les attributs classid, data, archive. 

%URI;. Element OBJECT. 

codebase : URI de base optionnel pour l'applet (deconseille, DTD 

transitoire). %URI;. Element APPLET. 

codetype : type de contenu de l'attribut code. %ContentType; . 

Element OBJECT. 

color: couleur du texte (deconseille, DTD transitoire). %Color;. 

Elements BASEFONT, FONT. 

cols: liste de longueurs, par defaut : 100% (1 colonne) (DTD 

Frameset). %MultiLengths;. Element FRAMESET. 

cols : nombre de colonnes (obligatoire) (deconseille, DTD transitoire). 

NUMBER. Element TEXTAREA. 

colspan : nombre de colonnes couvertes par la cellule. NUMBER. 

Elements TD, TH. 

compact : espacement inter-items reduit (deconseille, DTD 

transitoire). (compact) . Elements DIR, DL, MENU, OL, ul. 

content : informations associees (obligatoire). CDATA. Element META. 

coords: liste de longueurs separees par des virgules. %Coords;. 

Element AREA. 

coords : a utiliser avec les images cliquables cote client. %Coords;. 

Element A. 

D 

data : reference aux donnees de l'objet. %URI;. Element OBJECT. 

datetime : date et heure du changement. %Datetime; . Elements DEL, 

INS. 

declare: declare mais n'instancie pas le drapeau. (declare). 

Element OBJECT. 

defer : l'agent utilisateur peut differer l'execution du script, (defer) . 

Element SCRIPT. 

dir : direction du texte faible/neutre. (ltr | rtl). Tous les elements 

sauf APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, 

PARAM, SCRIPT. 

dir : directionnalite (obligatoire). (ltr | rtl). Element BDO. 

disabled : indisponible dans ce contexte. (disabled). Elements 

BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA. 
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E 

enctype : type d'encodage. %ContentType;. Element FORM. 

F 

f ace : liste de noms de police separes par des virgules (deconseille, 

DTD transitoire). CDATA. Elements BASEFONT, FONT. 

for : correspond a la valeur ID du champ. IDREF. Element LABEL. 

frame: queries parties du contour restituer ? %TFrame;. Element 

TABLE. 

frameb order : bordures de cadre ou non ? (1 | 0). Elements FRAME, 

I FRAME. 

H 

headers : liste des id des cellules de rubrique. IDREFS. Elements TD, 

TH. 

height : hauteur du cadre (deconseille, DTD transitoire). %Length;. 

Element I FRAME. 

height : hauteur de la cellule (deconseille, DTD transitoire). 

%Length;. Elements TD, TH. 

height : surclasser la hauteur. %Length;. Elements IMG, OBJECT. 

height : hauteur initiale (obligatoire) (deconseille, DTD Transitoire). 

%Length;. Element APPLET. 

href : URI de la ressource reliee. %URI;. Elements A, AREA, LINK. 

href : URI qui fait office d'URI de base. %URI;. Element BASE. 

hreflang : code de langue. %LanguageCode;. Elements A, LINK. 

hspace : gouttiere horizontale (deconseille, DTD transitoire). 

%Pixels;. Elements APPLET, IMG, OBJECT. 

http-equiv : nom de l'en-tete de reponse HTTR NAME. Element META. 

I 

id : identifiant unique au document. ID. Tous les elements sauf BASE, 
HEAD, HTML, META, SCRIPT, STYLE, TITLE. 

ismap : utiliser une image cliquable cote serveur. (ismap) . Elements 
IMG, INPUT. 

L 

label: a utiliser dans les menus hierarchiques. %Text;. Element 

OPTION. 

label : a utiliser dans les menus hierarchiques (obligatoire). %Text;. 

Element OPTGROUP 

lang : code de langue. %LanguageCode;. Tous les elements sauf 

APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, 

SCRIPT. 
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language : nom de langage de script predefini (deconseille, DTD 

transitoire). CDATA. Element SCRIPT. 

link: couleur des liens (deconseille, DTD transitoire). %Color;. 

Element BODY. 

longdesc : lien vers une description longue (en complement de 

l'attribut alt). %URI;. Element IMG. 

longdesc : lien vers une description longue (en complement de 

l'attribut title) (DTD Frameset). %URI;. Elements FRAME, IFRAME. 

M 

marginheight : marges verticales en pixels (DTD Frameset). 

%Pixels;. Elements FRAME, IFRAME. 

marginwidth : marges horizontales en pixels (DTD Frameset). 

%Pixels;. Elements FRAME, IFRAME. 

maxlength : nombre de caracteres maxi pour les champs de texte. 

NUMBER. Element INPUT. 

media : prevu pour ces medias. %MediaDesc; . Element STYLE. 

media : pour restitution sur ces medias. %MediaDesc;. Element LINK. 

method : methode HTTP utilisee pour soumettre le formulaire. (GET 

POST). Element FORM. 

multiple: selection simple par defaut. (multiple). Element 

SELECT. 

N 

name : nom. CDATA. Elements BUTTON, TEXTAREA. 

name : permet aux applets de se trouver les uns les autres (deconseille, 

DTD transitoire). CDATA. Element APPLET. 

name : nom du champ. CDATA. Element SELECT. 

name : nom du formulaire pour les scripts. CDATA. Element FORM. 

name : nom du cadre pour le ciblage. (DTD Frameset). CDATA. 

Elements FRAME, IFRAME. 

name : nom de l'image pour les scripts. CDATA. Element IMG. 

name : extremite du lien nominee. CDATA. Element A. 

name : soumettre comme partie du formulaire. CDATA. Elements INPUT, 

OBJECT. 

name : pour appel par l'attribut usemap (obligatoire). CDATA. Element 

MAP. 

name : nom de propriete (obligatoire). CDATA. Element PARAM. 

name : nom des meta-informations (obligatoire). NAME. Element MET A. 

nohref : cette region est inactive, (nohref). Element AREA. 

noresize : autoriser l'utilisateur a redimensionner le cadre? (DTD 

Frameset), (noresize). Element FRAME. 

noshade : (deconseille, DTD transitoire). (noshade). Element HR. 
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nowrap : suppression de la cesure (deconseille, DTD transitoire). 
(nowrap). Elements TD, TH. 

O 

object : fichier d'applet serialise (deconseille, DTD transitoire). 

CDATA. Element APPLET. 

onblur : l'element a perdu l'attention. %Script;. Elements A, AREA, 

BUTTON, INPUT, LABEL, SELECT, TEXTAREA. 

onchange : la valeur de l'element a change. %Script;. Elements 

INPUT, SELECT, TEXTAREA. 

onclick : le bouton d'un pointeur a ete clique. %Script; . Tous les 

elements sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, 

FRAMESET, HEAD, HTML, IFRAME, IS INDEX, META, PARAM, SCRIPT, 

STYLE, TITLE. 

ondblclick : le bouton d'un pointeur a ete double-clique. %Script;. 

Tous les elements sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, 

FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, 

SCRIPT, STYLE, TITLE. 

onfocus : l'element a recu l'attention. %Script;. Elements A, AREA, 

BUTTON, INPUT, LABEL, SELECT, TEXTAREA. 

onkeydown : une touche est appuyee. %Script;. Tous les elements 

sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, 

HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, 

TITLE. 

onkeypress : une touche a ete pressee puis relachee. %Script;. Tous 

les elements sauf applet, base, basefont, bdo, br, font, frame, 

FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, 

STYLE, TITLE. 

onkeyup : une touche est relachee. %Script;. Tous les elements sauf 

APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, 

HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE. 

onload : tous les cadres ont ete charges (DTD Frameset). %Script;. 

Element FRAMESET. 

onload : le document a ete charge. %Script;. Element BODY. 

onmousedown : le bouton d'un pointeur a ete appuye. %Script;. Tous 

les elements sauf applet, base, basefont, bdo, br, font, frame, 

FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, 
STYLE, TITLE. 

onmousemove : le bouton d'un pointeur a ete deplace a l'interieur. 
%Script; . Tous les elements sauf APPLET, BASE, BASEFONT, BDO, BR, 
FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, 
PARAM, SCRIPT, STYLE, TITLE. 
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onmouseout : le bouton d'un pointeur a ete deplace en dehors. 

%Script;. Tous les elements sauf APPLET, BASE, BASEFONT, BDO, BR, 

FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, 

PARAM, SCRIPT, STYLE, TITLE. 

onmouseover : le bouton d'un pointeur a ete deplace sur. %Script; . 

Tous les elements sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, 

FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, 

SCRIPT, STYLE, TITLE. 

onmouseup : le bouton d'un pointeur a ete relache. % Script; . Tous les 

elements sauf APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, 

FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, 

STYLE, TITLE. 

onreset : le formulaire a ete reinitialise. %Script;. Element FORM. 

onselect : un texte a ete selectionne. %Script;. Elements INPUT, 

TEXTAREA. 

onsubmit : le formulaire a ete soumis. %Script;. Element FORM. 

onunload : tous les cadres ont ete retires (DTD Frameset). %Script;. 

Element FRAMESET. 

onunload : le document a ete retire. %Script;. Element BODY. 

P 

profile : dictionnaire de meta-informations nomme. %URI;. Element 

HEAD. 

prompt: message d'invite (deconseille, DTD Transitoire). %Text;. 

Element ISINDEX. 

R 

Readonly : lecture seule. (readonly) . Element TEXTAREA. 

readonly : pour les boutons de type text et passwd. (readonly) . 

Element INPUT. 

rel : types de liens progressifs. %LinkTypes;. Elements A,LINK. 

rev : types de liens regressifs. %LinkTypes;. Elements A, LINK. 

rows : liste de longueurs, par defaut : 10 0% (1 rangee) (DTD Frameset). 

%MultiLengths;. Element FRAMESET. 

rows : nombre de lignes (obligatoire). NUMBER. Element TEXTAREA. 

rowspan : nombre de rangees couvertes par la cellule. NUMBER. 

Elements TD, TH. 

rules : regies entre rangees et colonnes. %TRules;. Element TABLE. 

S 

scheme : selectionner une forme de contenu. CDATA. Element META. 
scope : portee des cellules de rubrique. %Scope;. Elements TD, TH. 
scrolling : barres de defilement ou non (DTD Frameset), (yes | no 
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auto). Elements FRAME, IFRAME. 
selected : preselection, (selected). Element OPTION. 
shape : controle 1' interpretation des coordonnees. %Shape;. Element 
AREA. 

shape : a employer avec les images cliquables cote client. % Shape;. 
Element A. 

size : taille (deconseille, DTD Transitoire). %Pixels;. Element HR. 
size: taille de la police, [+|-]entier, par exemple size=" + l", 
size="4" (deconseille, DTD transitoire). CDATA. Element FONT, 
size : propre a chaque type de champ. CDATA. Element INPUT, 
size : taille de police de base pour les elements FONT (obligatoire) 
(deconseille, DTD transitoire). CDATA. Element BASEFONT. 
size : rangees visibles. NUMBER. Element SELECT, 
span : Les attributs de l'element COL affectent « n » colonnes. NUMBER. 
Element COL. 

span : nombre de colonnes par defaut dans le groupe. NUMBER. Element 
COLGROUP. 

src : URI d'un script externe. %URI;. Element SCRIPT, 
src : pour les champs avec des images. %URI;. Element INPUT, 
src : source du contenu du cadre (DTD Frameset). %URI;. Elements 
FRAME, IFRAME. 

src : URI de l'image a incorporer (obligatoire). %URI;. Element IMG. 
standby : message a montrer pendant le chargement. %Text; . Element 
OBJECT. 

start : numero commencant la sequence (deconseille, DTD 
transitoire). NUMBER. Element OL. 

style: indications de style associees. %StyleSheet;. Tous les 
elements sauf BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, 
STYLE, TITLE. 
summary : objet/structure pour sortie vocale. %Text;. Element TABLE. 

T 

tabindex : position dans l'ordre de tabulation. NUMBER. Elements A, 

AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA. 

target : restituer dans ce cadre (DTD Transitoire). %FrameTarget;. 

Elements A, AREA, BASE, FORM, LINK. 

text : couleur du texte du document (deconseille, DTD transitoire). 

%Color;. Element BODY. 

title: titre consultatif. %Text;. Tous les elements sauf BASE, 

BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE. 

type: type de contenu consultatif. %ContentType;. Elements A, 

LINK. 
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type : type de contenu pour l'attribut data. %ContentType;. Element 

OBJECT. 

type : type de contenu pour l'attribut value quand valuetype=ref. 

%ContentType;. Element PARAM. 

type : type de contenu du langage de script (obligatoire). 

%ContentType;. Element SCRIPT. 

type : type de contenu du langage de style (obligatoire). 

%ContentType;. Element STYLE. 

type : le genre de gadget voulu. %InputType; . Element INPUT. 

type : style de l'item de liste (deconseille, DTD transitoire). 

%LIStyle;. Element LI. 

type : style de numerotation (deconseille, DTD transitoire). 

%OLStyle;. Element OL. 

type: style de puces (deconseille, DTD transitoire). %ULStyle;. 

Element ul. 

type : utiliser comme bouton de formulaire. (button | submit 

reset) . Element BUTTON. 

U 

usemap : utiliser une image cliquable cote client. %URI ; . Elements IMG, 
INPUT, OBJECT. 

V 

valign : Alignement vertical dans les cellules, (top | middle 

bottom | baseline). Elements COL, COLGROUP, TBODY, TD, TFOOT, 

TH, THEAD, TR. 

value : specifier pour les boutons radio et les cases a cocher. CDATA. 

Element INPUT. 

value : par defaut, le contenu de l'element. CDATA. Element OPTION. 

value : valeur de propriete. CDATA. Element PARAM. 

value : envoye au serveur a la soumission. CDATA. Element BUTTON. 

value : reinitialise le numero dans la sequence (deconseille, DTD 

transitoire). NUMBER. Element LI. 

valuetype : comment interpreter la valeur ? (deconseille, DTD 

transitoire). (DATA | REF | OBJECT). Element PARAM. 

version : une constante (deconseille, DTD transitoire). CDATA. 

Element HTML. 

vlink : couleur des liens visites (deconseille, DTD transitoire). 

%Color;. Element BODY. 

vspace : gouttiere verticale (deconseille, DTD transitoire). %Pixels;. 

Elements APPLET, IMG, OBJECT. 
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W 

width : largeur (deconseille, DTD transitoire). %Length;. Element HR. 

width: largeur du cadre (DTD transitoire). %Length;. Element 

I FRAME. 

width : surclasser la largeur. %Length;. Elements IMG, OBJECT. 

width : largeur du tableau. %Length;. Element TABLE. 

width : largeur de la cellule (deconseille, DTD transitoire). %Length; . 

Elements TD, TH. 

width : largeur initiale (obligatoire) (deconseille, DTD transitoire). 

%Length;. Element APPLET. 

width: specification de la largeur de colonne. %MultiLength;. 

Element COL. 

width : largeur par defaut des elements COL contenus. 

%MultiLength;. Element COLGROUP. 

width : largeur (deconseille, DTD transitoire). NUMBER. Element PRE. 



12.3. Compatibility XHTML/HTML 

Comme XHTML est une application XML, certaines habitudes 
parfaitement legales dans le HTML 4 fonde sur SGML doivent etre 
amendees. 



Redaction correcte des documents 

La redaction correcte est un nouveau concept introduit par XML. II 
signifle essentiellement qu'un element doit toujours posseder une balise 
de fin ou etre ecrit selon une forme particuliere (voir ci-dessous). En 
outre, tous les elements doivent etre imbriques et non se chevaucher. 



Tableau 12.2 : « La redaction correcte » 
CORRECT INCORRECT 

elements imbriques elements se chevauchant 

<p>ceci est un paragraphe <p>ceci est un paragraphe 

<em>avec emphase</em>.</p> <em>avec emphase .</px/em> 
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IMoms des elements et des attributs en 
minuscules 

Les documents XHTML doivent employer la casse « minuscules » pour 
tous les noms d'element HTML et les noms d'attribut. Cette difference 
est necessaire, car XML est sensible a la casse (<li> et <LI> sont des 
balises differentes). 

Balises de fin obligatoires 

Dans le HTML 4 fonde sur SGML, il est possible d'omettre la balise de 
fin de certains elements, 1' element suivant creant une balise de fm 
implicite. Cette omission n'est plus autorisee dans le XHTML fonde sur 
XML. Tous les elements autres que ceux declares dans la DTD comme 
EMPTY doivent posseder une balise de fm. 



Tableau 12.3 : XHTML : balise de fin obligatoire 

CORRECT INCORRECT 

elements termines elements non termines 

<p>Ceci est un <p>Ceci est un 

paragraphe . </p><p> Ceci paragraphe .<p>Ceci est un 

est un autre autre paragraphe. 
paragraphe . </p> 



Les elements vides doivent toujours posseder une balise de fin ou la 
balise de debut se terminer avec />. Par exemple, <br/> ou 
<hr></hr>. 



Tableau 12.4 : Elements vides 


CORRECT 


INCORRECT 


balises vides terminees 

<br/xhr/> 


balises vides non terminees 

<br><hr> 



Vous devez placer un espacement avant le / et > de fin des elements 
vides, par exemple <br />, <hr /> et <img src="karen. jpg" 
alt="Karen" />. Utilisez egalement une syntaxe minimale pour les 
elements vides, par exemple <br />, comme syntaxe alternative de 
<brx/br> qui est autorise par XML, car cela donne des resultats 
inattendus avec certains agents utilisateurs. 
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En cas toutefois d'occurrence vide d'un element dont le modele de 
contenu n'est pas EMPTY (par exemple, un titre ou un paragraphe vide), 
n'utilisez pas la forme minimisee : utilisez <px/p> et non <p />. 

Encodage de caracteres 

Pour specifier l'encodage de caracteres dans le document, utilisez la 
specification de l'attribut d'encodage dans la declaration xml (par 
exemple <?xml version="l . 0" encoding="EUC-JP"?>) et une 
declaration meta http-equiv (par exemple <meta http-equiv= 
"Content-type" content=' text/html; charset="EUC-JP" ' 
/>). La valeur de l'attribut d'encodage de l'instruction de traitement xml 
est prioritaire. 



Remarques sur les elements 
Elements script et style 

En XHTML, les elements script et style sont declares comme 
possedant un contenu de type # PCDATA. Ainsi, < et & seront-ils traites 
comme le debut d'un balisage, et les entites comme sit; et & 
seront-elles reconnues comme des references d' entites par le processeur 
XML, soit respectivement < et &. Emballer le contenu des elements 
script ou style a l'interieur d'une section marquee CDATA evitera la 
transformation de ces entites. 

<script> 
<! [CDATA [ 

. . . contenu script non echappe . . . 
]]> 
</script> 

Les sections CDATA sont reconnues par le processeur XML et 
apparaissent comme des nceuds dans le Modele Objet de Document. 
Une alternative consiste a employer des scripts et des styles externes. 

Utilisez des feuilles de style externes si votre feuille de style utilise < ou 
& ou ] ] > ou — . Utilisez des scripts externes si vos scripts utilisent < ou 
& ou ] ] > ou — . Les parseurs XML ont le droit d'eliminer le contenu des 
commentaires. Par consequent, la pratique historique de « cacher » ses 
scripts et ses feuilles de style au sein d'un commentaire pour rendre les 
documents compatibles avec les anciens navigateurs n'est pas 
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conseillee : elle ne fonctionnera pas comme attendu dans les mises en 
oeuvre basees sur XML. 



Element isindex 

Ne mettez pas plus d'un element isindex dans le head d'un 
document. L'element isindex est abandonne en faveur de l'element 

input. 



Remarques sur les attributs 

XML ne supporte pas la minimisation des attributs. La paire 
valeur/attribut doit etre ecrite au complet. Les noms d' attributs tels que 
compact et checked ne peuvent pas etre pris comme elements sans 
que leur valeur soit specifiee. 



Tableau 12.5 : Valeur obligatoire 
CORRECT INCORRECT 

attributs non minimises attributs minimises 

<dl compact="compact"> <dl compact> 



Quelques agents utilisateurs HTML sont toutefois incapables 
d'interpreter les attributs booleens quand ils apparaissent dans leur 
forme complete (non minimisee), tels que requis par XML l.O. Notez 
que ce probleme n'affecte pas les agents utilisateurs compatibles avec 
HTML 4. Cela concerne les attributs compact, nowrap, ismap, 
declare, noshade, checked, disabled, readonly, multiple, 
selected, noresize, defer. 

Toutes les valeurs d' attributs doivent etre mises entre guillemets, meme 
celles qui semblent etre numeriques. 





Tableau 12.B : 


Guillemets imperatifs 






CORRECT 




INCORRECT 




valeurs d'attributs entre guillemets 


valeurs d'attributs sans 


les 


guillemets 


<table rows= 


"3"> 


<table rows=3> 
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Dans les valeurs d'attributs, les agents utilisateurs oteront les 
espacements de debut et de fin des valeurs d'attributs et dresseront une 
sequence d'un ou plusieurs caracteres d'espacement (tels que les retours 
de lignes) a un unique espacement « intermots » (un caractere 
d'espacement ASCII pour les ecritures occidentales). 

Evitez les retours de ligne et les caracteres d'espacement multiples au 
sein des valeurs d'attributs. lis seront traites illogiquement par les agents 
utilisateurs. 

Quand une valeur d'attribut contient une eperluette, l'attribut doit etre 
exprime comme une reference d'entite du caractere (par exemple 
&). Par exemple, quand l'attribut href de 1' element a pointe vers 
un script CGI qui accepte des parametres, il doit etre exprime comme 
ceci : 

http : //my. site.dom/cgi -bin /my script . pl?class=guest&name=user 

plutot que comme 9a : 

http: //my. site . dom/cgi -bin /my script . pl?class=guest&name=user . 

Attributs id et name 

HTML 4 a defini l'attribut name pour les elements a, applet, form, 
frame, i frame, img et map. HTML 4 a egalement introduit l'attribut 
id. Ces deux attributs ont ete concus pour etre utilises comme des 
identificateurs partiels. 

En XML, les identificateurs partiels sont de type ID, et il ne peut y avoir 
qu'un unique attribut ID par element. En XHTML 1.0, l'attribut id est 
aussi defini de type ID. Pour s' assurer que les documents XHTML 1.0 
sont des documents XML correctement structures, les documents 
XHTML 1.0 doivent utiliser l'attribut id quand l'identificateur partiel 
est defini, meme sur les elements qui possedent historiquement aussi un 
attribut name. 

En XML, un URI qui termine par un identificateur partiel de la forme 
#foo ne se refere pas aux elements possedant un attribut name="foo", 
mais aux elements possedant un attribut defini de type ID, soit l'attribut 
id de HTML 4. Beaucoup de clients HTML existants ne maintiennent 
pas 1' utilisation des attributs de type ID de cette maniere, done des 
valeurs identiques doivent etre fournies pour les deux attributs arm 
d' assurer des compatibilites ascendante et descendante maximales (par 
exemple, <a id="foo" name="foo">. . .</a>). 
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Egalement, depuis que l'ensemble des valeurs legales definies pour les 
attributs de type ID est bien plus restreint que pour ceux de type CDATA, 
le type de l'attribut name a ete change en NMTOKEN. Cet attribut est 
contraint de maniere a ce qu'il ne puisse pas avoir d'autres valeurs que 
celles de type id, ou comme la production Name en XML 1.0 Section 
2.5, production 5. Malheureusement, cette contrainte ne peut pas etre 
exprimee dans les DTD XHTML 1.0. A cause de ces changements, la 
plus grande precaution est de rigueur lors de la conversion de vos 
documents HTML existants. Les valeurs de ces attributs doivent etre 
uniques a l'interieur d'un document, valides, et toute reference a ces 
identificateurs partiels (qu'ils soient internes ou externes) doit etre mise 
a jour, meme si les valeurs doivent etre changees durant la conversion. 

XHTML 1.0 a abandonne l'attribut name des elements a, applet, 
form, frame, if rame, img et map, et il sera elimine dans les versions 
suivantes. 



Attributs lang et xmhlang 

Utilisez les deux attributs lang et xmlrlang lorsque vous specifiez le 
langage d'un element. La valeur de l'attribut xml : lang est prioritaire. 



Exclusions SGML 

SGML permet au redacteur d'une DTD d'exclure la presence de certains 
elements a l'interieur d'un element. Une telle interdiction (appelee 
« exclusion ») n'est pas possible en XML. 

Par exemple, la DTD HTML 4 stricte interdit l'emboitement d'un 
element a dans un autre element a a quelque profondeur que ce soit. II 
n'est pas possible de definir ce type d' interdiction en XML. Meme si 
cette interdiction ne peut pas etre definie dans la DTD, certains elements 
ne devraient pas etre emboites. 



Instructions de traitement 

Verifiez que les instructions de traitement s'executent sur les agents 
utilisateurs. Si la declaration XML n'est pas incluse dans un document, 
le document peut uniquement employer les jeux de caracteres par defaut 
TJTF-8 ou TJTF-16. 
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Modele Objet de Document et XHTML 

La Recommandation de Modele Objet de Document niveau 1 definit les 
interfaces du Modele Objet de Document pour XML et HTML 4. Le 
Modele Objet de Document du HTML 4 specifie que les noms des 
elements et des attributs HTML sont retournes en casse « majuscules ». 
Le Modele Objet de Document XML specifie que les noms des elements 
et des attributs sont retournes dans la casse specifiee. En XHTML 1.0, 
les noms des elements et des attributs sont specifies dans la casse 
« minuscules ». Cette difference apparente peut etre fixee de deux 
manieres : 

Les applications qui accedent a des documents XHTML distribues 
avec le type de media Internet text /html via le DOM peuvent 
utiliser le DOM HTML et s'appuyer sur des noms d'elements et 
d' attributs retournes en majuscules par ces interfaces. 

Les applications qui accedent a des documents XHTML distribues 
avec le type de media Internet text/html ou 
application/xml peuvent egalement utiliser le DOM XML. 
Les noms des elements et des attributs sont renvoyes en casse 
« minuscules ». Quelques elements XHTML peuvent ou non 
apparaitre dans l'arbre d'objets, car ils sont facultatifs dans le 
modele de contenu (par exemple l'element tbody a l'interieur 
d'un tableau table). Cela se produit parce qu'en HTML 4 
quelques elements pouvaient etre minimises et leurs balises de 
debut et de fin pouvaient etre toutes les deux omises (une 
fonctionnalite SGML). Ce n'est pas possible en XML. Plutot que 
de demander aux auteurs de documents d'inserer des elements 
hors contexte, XHTML a rendu facultatifs les elements. Les 
applications ont besoin de s'adapter en respectant cela. 

Feuilles de style imbriquees (CSS) et XHTML 

La Recommandation des feuilles de style imbriquees niveau 2 definit les 
proprietes appliquees a l'arbre d' analyse grammaticale du document 
HTML ou XML. Les differences dans 1' analyse produiront differents 
resultats sonores ou visuels, selon les selecteurs utilises. Les indicateurs 
suivants reduisent cet effet pour des documents distribues sans 
modification des deux types de medias : 

Les feuilles de style CSS pour le XHTML doivent employer des 
noms d'elements et d'attributs de casse « minuscules ». 
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Dans les tableaux, l'element tbody sera deduit par le parseur 
d'un agent utilisateur HTML, mais pas par le parseur d'un agent 
utilisateur XML. Par consequent, vous devez toujours ajouter 
explicitement un element tbody s'il se refere a un selecteur CSS. 

Au sein de l'espace de noms XHTML, les agents utilisateurs 
reconnaissent l'attribut id comme un attribut de type ID. Par 
consequent, les feuilles de style doivent pouvoir continuer a 
employer la syntaxe raccourcie # du selecteur meme si 1' agent 
utilisateur ne lit pas la DTD. 

Au sein de l'espace de noms XHTML, les agents utilisateurs 
reconnaissent l'attribut class. Par consequent, les feuilles de 
style doivent pouvoir continuer a employer la syntaxe raccourcie 
« . » du selecteur. 

Les CSS definissent des regies de conformite differentes pour les 
documents HTML et XML. Les regies HTML s'appliquent aux 
documents XHTML distribues en tant que HTML, les regies 
XML aux documents XHTML distribues comme XML. 



DTD XHTML 

Comme pour HTML, XHTML existe en trois « parfums » : strict, 
transitoire et jeux d'encadrement. Ces trois versions sont respectivement 
declarees comme suit : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http: //www. w3.org/TR/xhtmll/DTD/xhtmll-frameset .dtd"> 

La variante frameset reprend tous les balises et attributs de la variante 
transitional. Deux balises ont ete rajoutee : frameset et frame. 

Differences entre strict et transitional 

L' analyse des differences permet de traduire facilement un document 
non conforme, ou conforme HTML 4.01 transitional, en document 
XHTML 1 .0 strict. La variante strict oblige une separation du contenu et 
de la presentation. Cela implique done la suppression de tous les 
elements et attributs de mise en forme, et l'obligation de passer par les 
CSS. 
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Le Tableau B.l presente les elements devenus obsoletes en XHTML 
strict et leurs alternatives. 



Tableau 12. 7 : Elements obsoletes en XHTML strict 


Element 


Alternative 


frameset, 
frame 


Utilisez la variante frameset du XHTML 


if rame 


Utilisez la variante transitional du XHTML 


font, 
basef ont 


Utilisez les styles CSS font et ses derives : 

font— family, font— size, font— weight, etc. 


u 


Style text— decoration : underline; 


s, strike 


Style text— decoration : line— through; 


menu, dir 


Ces balises ont en fait la meme fonction que ul ; seule 
I'apparence par defaut change. Remplacez-les par une 
liste ul et modifiez I'apparence avec les styles 
list-style et leurs derives (list-style-type, 
etc.), et eventuellement margin ou padding. 


center 


Le style text-align : center; a mettre sur 
I'element parent pour centrer des elements de type en 
ligne. Sur les elements de type bloc, les styles 
suivants : margin— left : auto; margin— right : 
auto; 


isindex 


Element input 


applet 


EElement object 



Le Tableau suivant presente les attributs devenus obsoletes en XHTML 
strict et leurs alternatives. 



Attribut 



Align 



Tableau 12.8 : Attributs obsoletes en XHTML strict 
Elements concernes Alternative 



div, p, hi a h6, hr, 
object, img, input, 
legend, table, 
caption 



Style text-align sur 
I'element parent pour aligner 
des elements de type en 
ligne. Sur des elements de 
type bloc, les styles 
suivants : margin-left, 
margin— right. 
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Tableau 12.8 : Attributs obsoletes en XHTML strict 


Attribut 


Elements concernes 


Alternative 


background 


body 


Style background— image, 
qui peut etre employe 
conjointement avec les styles 
background— position et 
background— repeat pour 
positionner et definir la 
repetition de I'image de fond. 
II est possible d'utiliser ces 
styles sur pratiquement tous 
les elements. 


bgcolor 


body, table, tr, td, 
th 


Style background-color 


border 


object, img 


Style border 


clear 


Br 


Style clear 


compact 


Ul, ol, dl 


Jouer sur les styles margin 

ou padding 


height 


Td, th 


Style height 


hspace, 
vspace 


object, img 


Style margin 


language 


script 


Aucun. L'attribut type 
suffit : script 
type="text/ j avascript". 


link, alink, 
vlink 


body 


Definissez un style par defaut 
sur I'element a ainsi que sur 
les pseudo-classes :link , 
: visited et : active. 


name 


img, form 


Utilisez l'attribut id 


Noshade 


hr 


Ensemble des styles border 
, en particulier 

border-style. 

Style white-space : 
nowrap; 


Nowrap 


th, td 


Size 


hr 


Style height 


start 
target 


01 


Utilisez les styles pour gerer 
des compteurs 


base, link, a, area, 
form 


Aucun 
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Tableau 12.8 : Attributs obsoletes en XHTML strict 


Attribut 


Elements concernes 


Alternative 


text 


body 




Style color 


type 


ul, ol, li 




Style list-style 


value 
width 


li 




Utilisez les styles pour gerer 
des compteurs 


hr, pre, td, 


th 


Style width 



Remarquez par ailleurs que, au sein des elements form, noscript et 
blockquote , il ne peut plus y avoir d'elements de type en ligne. 

Pour convertir rapidement et de facon correcte un document HTML en 
document au format XHTML, servez-vous de HTML Tidy ou de 
l'editeur/navigateur Amaya. 



12.4. DTD et XML 

XML a recours a un fichier nomme DTD (Document Type Definition, 
definition de document type) pour verifier qu'un document XML 
respecte une syntaxe donnee. Une DTD constitue une grammaire qui 
permet de verifier la conformite du document XML. La norme XML 
n'impose pas l'utilisation d'une DTD pour un document XML, mais elle 
impose en revanche le respect exact des regies de base de la norme 
XML. 

La terminologie XML emploie les definitions suivantes : 

Document bien forme pour un document qui ne comporte pas de 
DTD mais respecte les exigences de la specification. 

Document valide pour un document qui se conforme strictement 
aux regies d'une DTD. 

Une DTD peut etre definie de 2 facons : 

De facon interne : la grammaire est incluse au sein meme du 
document. 

De facon externe : soit en appelant un fichier qui contient la 
grammaire a partir d'un fichier local, soit en y accedant par son 
URL. 
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C'est cette derniere solution qui est adoptee par les fichiers HTML : 
HTML 4 etant fonde sur XML, il repose sur des DTD. Vous l'avez vu 
lors de l'ecriture de pages Web, puisque tout fichier HTML debute en 
principe par la specification de la DTD employee : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www.w3 . org/TR/html4/ loose .dtd"> 

La prehistoire du developpement de sites Web a fait croire a de 
nombreux concepteurs que le HTML pouvait s'ecrire de maniere assez 
fibre, le navigateur se chargeant de rattraper les betises et d'afficher la 
page tant bien que mal. 

C'est evidemment totalement faux. Cela n'etait du qu'au simple fait que 
les agents utilisateurs de l'epoque etaient non validants, incapables de 
gerer correctement et totalement les specifications des langages Web. 
C'est pourquoi un concepteur doit encore se battre pour faire 
fonctionner un site dans les principaux navigateurs. 

II est done utile de s'interesser un peu plus a la structure d'une DTD. 
Savoir lire une DTD est en effet presque obligatoire pour toute personne 
devant produire du code (XML, (X)HTML, etc.) valide. Une DTD 
constitue une reference beaucoup plus rapide a consulter que les longues 
specifications publiees par le W3C. Elle indique clairement ce que le 
navigateur est en droit d'attendre. 



Declaration d'un element 

Pour pouvoir creer un document XML, il est utile dans un premier 
temps de definir les elements qui peuvent etre employes, et plus 
exactement les informations que vous souhaitez utiliser. 

La definition d'un element repond a la syntaxe suivante : 

< ! ELEMENT Norn Mo dele > 

Le parametre mo dele represente soit un type de donnees predefini, soit 
une regie d'utilisation de l'element. Les types predefinis utilisables sont 
presentes dans le Tableau D.l. 



Tableau 12.9 


: Types predefinis 


pour 


un element 


Type predefini 


Description 






ANY 


L'element 


Deut contenir tout 


type 


de donnees 



524 LE GUIDE COMPLET 



dtd et xml —— 



Tableau 12.9 : Types predefinis pour un element 


Type predefini 


Description 


EMPTY 


L'element ne contient pas de donnees specifiques 


#CDATA 


Le contenu n'est pas interprets par I'agent utilisateur 


# PC DATA 


L'element doit contenir une chaTne de caracteres. Ce 
contenu est interprets par I'agent utilisateur. 



Autrement dit, un element avec un contenu de type # PC DATA (parsed 
character data) verra ce contenu interprete par le navigateur, les balises 
eventuelles etant traitees comme telles, tandis qu'avec #CDATA le 
contenu est considere comme une simple chaine de caracteres... 

Ainsi un element nomme tit re contenant un type # PC DATA sera 
declare comme suit dans la DTD : 

<! ELEMENT titre (#PCDATA) > 



A 



Ecriture de # PC data 
Le mot-cle #pcdata doit imperativement figurer entre parentheses. 
Vous obtiendrez sinon une erreur du parseur. 



Cet element pourra etre ecrit de la facon suivante dans le document 
XML: 

<titre>Bible C++</titre> 

II est egalement possible de defmir des regies d' utilisation : les elements 
XML qu'un element peut ou doit contenir. Cette syntaxe se fait a l'aide 
de notations specifiques, presentees dans le Tableau D.2 : 



Tableau 12. TO : 


Operateurs des regies d'utilisation d'un element 


Operateur Exemple 


Signification 


+ a + 


L'element a doit etre present au minimum une fois 


* a* 


L'element a peut etre present plusieurs fois (ou 
aucune) 


? a? 


L'element a est facultatif. 


1 a|b 


Les elements a ou b peuvent etre presents 
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Tableau 12. 10 : Operateurs des regies d'utilisation d'un element 
Operateur Exemple Signification 

, a,b L'element a doit etre present et suivi de l'element 

b 

() (a,b)+ Regroupement d'elements en vue de leur appliquer 

les autres operateurs. Ici, la presence d'un 
element a suivi d'un element b est obligatoire. 



Vous pouvez ainsi creer la declaration suivante dans une DTD : 



ELEMENT livre (titre, editeur, auteur, date) , url: 
ELEMENT titre (#PCDATA) > 
ELEMENT editeur (#PCDATA) > 
ELEMENT auteur (#PCDATA) > 



< 
< 
< 
< 

<! ELEMENT url (#PCDATA) > 

Cette declaration peut aboutir a un document XML du style 

<livre> 

<titre>La Bible C++</titre> 

<editeur>Micro Application </editeur> 

<auteur>Horstamn C, Budd T. </auteur> 

<date>2004</date> 

<url>www.microapp. com </url> 
</livre> 

ou bien : 

<livre> 

<titre>La Bible C++</titre> 

<editeur>Micro Application </editeur> 

<auteur>Horstamn C, Budd T. </auteur> 

<date>2004</date> 
</livre> 



Declaration d'attributs 

Vous pouvez aj outer des proprietes a un element particulier en lui 
affectant un attribut, e'est-a-dire une paire cle/valeur. Avec XML, la 
syntaxe de definition d'un attribut est la suivante : 

<! ATTLIST element attribut type > 

type represente le type de donnee de l'attribut. II peut etre : 

Litteral : vous affectez une chaine de caracteres a un attribut. Vous 
le declarez ainsi a l'aide du mot-cle CDATA. 
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Enumeration : permet de definir une liste de valeurs possibles 
pour un attribut donne, arm de limiter le choix de l'utilisateur. La 
syntaxe de ce type d' attribut est : 

<! ATTLIST element attribut (valeurl | valeur2 | ... ) > 

Pour definir une valeur par defaut, faites suivre l'enumeration par 
la valeur desiree placee entre guillemets : 

<! ATTLIST element attribut (valeurl | valeur2 ) 
"valeur_par_defaut" > 

Atomique : permet de definir un identiflant unique pour chaque 
element grace au mot-cle ID. 

Chacun de ces types d'attributs peut etre suivi d'un mot-cle particulier 
qui permet de specifier le niveau de necessite de 1' attribut : 

#IMPLIED : l'attribut est facultatif. 

#REQUIRED : l'attribut est obligatoire. 

#FIXED : l'attribut possede une valeur par defaut s'il n'est pas 
defini. II doit etre immediatement suivi de la valeur placee entre 
guillemets. 

Une declaration d' attribut peut ainsi se presenter comme ceci : 

<! ATTLIST livre IDlivre ID #REQUIRED 

niveau (debutant | intermediaire I expert) "expert" > 

L'element livre possede deux attributs IDlivre et niveau. Le premier 
attribut est de type atomique : c'est un identiflant unique obligatoire. 
L'attribut niveau peut etre debutant, intermediaire ou expert, cette 
derniere valeur etant affectee par defaut. 



Declaration de notations 

XML permet la definition d'une application par defaut a lancer pour 
ouvrir des documents non XML encapsules dans le code XML. II est 
ainsi possible d'associer les images JPG au programme Paint Shop Pro 
(psp.exe) grace a la syntaxe suivante : 

<! NOTATION jpg SYSTEM "psp.exe"> 
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Declaration d'entites 

XML permet de creer des entites, c'est-a-dire de declarer un groupe 
d'elements sous un nom arm de ne pas avoir a reecrire ces derniers 
plusieurs fois dans la DTD s'ils se repetent, dans le meme esprit que les 
macros dans les editeurs de texte. Le recours a des entites dans un 
document XML permet une meilleure lisibilite, un meilleur controle du 
contenu et ameliore la facilite de mise a jour. 

XML possede plusieurs types d'entites : les entites generales, les entites 
parametres et les entites caracteres. 

Entites generales 

Les entites generales servent a definir des elements pouvant etre 
substitues dans le corps du document XML (meme s'ils sont dermis au 
sein de la DTD et non du document XML lui-meme). La syntaxe d'une 
entite generale est la suivante : 

<!ENTITY nom_entite "Contenu de l'entite"> 

II est par exemple possible de declarer 1' entite generale suivante dans la 
DTD: 

<!ENTITY site "microapp . com"> 

Les entites definies dans la DTD peuvent ainsi etre utilisees dans le code 
XML en les appelant avec la syntaxe suivante : 

Snom entite; 

La declaration precedente pourra done donner un document XML du 
style : 

<livre> 

<titre>La Bible C++</titre> 

<editeur>Micro Application </editeur> 

<auteur>Horstamn C, Budd T. </auteur> 

<date>2004</date> 

<url>www. @&site; </url> 
</livre> 

Le parseur transformera automatiquement chacune des entites contenues 
dans le code XML en chaine de caracteres : 

<livre> 

<titre>La Bible C++</titre> 
<editeur>Micro Application </editeur> 
<auteur>Horstamn C, Budd T. </auteur> 
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<date>2004</date> 
<url>www . microapp . com</url> 
</livre> 

Les entites generales peuvent aussi etre contenues dans un fichier 
exterieur (arm d'etre utilisees par plusieurs DTD, par exemple). Elles 
portent alors le nom d' entites externes. La syntaxe d'une entite externe 
est la suivante : 

<!ENTITY nom_entite SYSTEM "nom_fichier"> 

Dans 1' exemple suivant, le contenu du fichier niv.txt (situe dans le meme 
repertoire que la DTD) sera insere dans le fichier XML a chaque fois 
que l'entite &niv; sera rencontree : 

<!ENTITY niv SYSTEM "niv.txt"> 



Entites parametres 



Une entite parametre permet d'employer des entites dans les DTD 
elles-memes. La syntaxe est la suivante : 

<!ENTITY % nom_entite definition> 

Le nom de l'entite doit toutefois respecter certaines regies : 

Commencer par une lettre ou un trait de soulignement (underscore 

_)■ 

Etre compose uniquement de lettres, de chiffres, de tirets (-), de 

traits de soulignement (_), de points (.) ou du caractere deux 

points (:). 

Voici un exemple de declaration d' entite parametre : 

<!ENTITY % niv #REQUIRED 

niveau (debutant I intermediaire I expert) "expert"> 

II est egalement possible (comme pour les entites generales) de definir 
une entite parametre externe grace a la syntaxe suivante : 

<! ENTITY % nom_entite SYSTEM "fichier . dtd"> 

La DTD fichier. dtd sera un fichier comportant la declaration 
d' entite parametre : 

<!ENTITY % nom entite "def inition"> 
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Entites caracteres 

Les entites caracteres sont des caracteres reserves du XML represented 
sous forme d'entites generates afin de pouvoir inserer ces caracteres 
reserves dans le document XML. Les principales entites caracteres sont 
presentees dans le Tableau D.3. 





Tableau 12.11 


Principales entites caractere 


Entite caractere 


Representation 


& amp ; 




& 


Sit; 




< 


> 




> 


&apos; 


Squot; 




" 



II est egalement possible de defmir des entites caracteres pour n'importe 
quel caractere en utilisant le code hexadecimal du caractere : 

<! ENTITY nom_entite "&#xCODEHEXA; "> 

Par exemple : 

<!ENTITY ccedille "ç"> 

Meme si cette annexe peut sembler succincte, elle devrait vous 
permettre de mieux comprendre les DTD des specifications HTML 4.01 
et XHTML 1. 



12.5. Selecteurs CSS 

La version 3 des selecteurs CSS (http://www.w3.org/Style/css3-selectors 
-updates/WD-css3-selectors-20010126.fr.html) propose des selecteurs 
nombreux et tres sophistiques, capables de repondre desormais a 
pratiquement toutes les situations. Les selecteurs sont classes dans le 
tableau suivant par ordre d' apparition dans les versions CSS, afin de 
montrer revolution. 
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Tableau 12. 12 : Evolution des selecteurs CSS de la version 1 a la version 3 


Motif 


Signification 


CCS 


E 


Un element de type E 


1 


E : link/visited 


Un element E d'une ancre hypertexte dont la 
cible n'a pas encore ete visitee ( : link) ou 
I'a ete ( : visited) 


1 


E : : first-line 


Le premiere ligne mise en forme d'un 
element E 


1 


E : : first-letter 


La premiere letttre mise en forme d'un 
element E 


1 


E .warning 


Un element E dont la classe est « warning ». 
Le langage du document specifie le mode de 
determination de la classe. 


1 


Etmonid 


Un element E dont I'D est « monid ». 


1 


E F 


Un element F descendant d'un element E 


1 


E : active/hover/focus 


Un element E pendant certaines actions de 
I'utilisateur 


1 et2 


* 


N'importe quel element 


2 


E[attribut] 


Un element E avec un attribut « attribut » 


2 


E [attribut="valeur M ] 


Un element E avec un attribut « attribut » 
dont la valeur est « valeur » 


2 


E [attribut~="valeur"] 


Un element E avec un attribut « attribut » 
dont la valeur est une liste de valeurs 
separees par des virgules dont I'une est 
egale a « valeur » 


2 


E:first-child 


Un element E, premier enfant de son parent 


2 


E:lang (fr) 


Un element E en langue « fr ». Le langage 
du document specifie le mode de 
determination de la langue 


2 


E : :before 


Contenu genere avant un element E 


2 


E: : after 


Contenu genere apres un element E 


2 


E > F 


Un element F enfant d'un element E 


2 


E + F 


Un element F immediatement precede par 
un element E 


2 


E [attribut A ="valeur"] 


Un element E avec un attribut « attribut » 
dont la valeur commence exactement par la 
chaTne « valeur » 


3 
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Tableau 12. 12 : Evolution des selecteurs CSS de la version 1 a la version 3 


Motif 


Signification CCS 


E [attribut$="valeur"] 


Un element E dont la valeur de I'attribut 
« atthbut » se termine exactement par la 
chaTne « valeur » 


3 


E [attribut*="valeur"] 


Un element E dont la valeur de I'attribut 
« atthbut » contient la sous-chaTne « valeur » 


3 


E [href lang ="en"] 


Un element E dont I'attribut « hrefiang » 
contient une liste separee par des tirets qui 
commence [a gauche) par « en » 


3 


E:root 


Un element E racine du document 3 


E: nth-child (n) 


Un element E, n leme enfant de son parent 3 


E : nth-last-child (n) 


Un element E, n' Sme enfant de son parent en 
partant du dernier 


3 


E :nth-of-type (n) 


Un element E, n' 6me descendant de ce type 


3 


E :nth-last-of-type (n) 


Un element E, n' 6me descendant de ce type 3 
a partir du dernier 


E: last-child 


Un element E, n' Sme dernier enfant de son 3 
parent 


E : f irst-of-type 


Un element E, premier descendant de ce 3 
type 


E : last-of-type 


Un element E, dernier descendant de ce 3 
type 


E : only-child 


Un element E, seul enfant de son parent 3 


E:only-of-type 


Un element E, seul descendant de ce type 3 


E : empty 


Un element E depourvu d'enfant (y compris 3 
tout nceud texte] 


E : target 


Un element E cible de I'URI 3 


E : enabled/disabled 


Un element d'interface utilisateur E active ou 3 
desactive 


E : checked 


Un element d'interface utilisateur E coche 3 
(bouton d'option ou case a cocher) 


E : : selection 


La portion d'un element E actuellement 
selectionnee/mise en surbrillance par 
I'utilisateur 


3 


E:not (s) 


Un element E qui ne correspond pas au 
selecteur simple s 


3 


E ~ F 


Un element F precede par un element E 3 
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Comme le montre ce tableau, les possibilities d'enrichissement d'un 
contenu a l'aide d'une feuille de style sont desormais extremement 
riches. CSS permet en outre de combiner a l'aide d'operateurs les 
selecteurs simples, ce qui elargit encore le champ des possibilites. 



12.6. Ressources Web 

De nombreuses autres ressources sont presentes sur le Web : il est 
fortement recommande d'y acceder, car les ressources en ligne sont 
actualisees plus frequemment que ne peut l'etre cet ouvrage. 



Specifications 

Specification HTML 4.01 : www.w3.org/TR/html401 (anglais), www.la-grange 

.net/w3c/html4.01/cover.html (francais). 

Specification du Modele Objet de Document (DOM) : www.w3.org/TR 

/REC-D0M-Level-1/ 

Recommandation XHTML 1.0 : www.w3.org/TR/2002/REC-xhtmll-20020801/ 

(anglais), www.la-grange.net/w3c/xhtmll/ (francais). 

Site Web Unicode : www.unicode.org/ 



Outils de creation Web 

Logiciel commerciaux 

WebExpert : http://softwares.visicommedia.com/fr/products/webexpert/overview 

.html 

Adobe Golive : www.adobe.fr/products/golive/main.html 

Namo Web Editor : www.namo.com/products/webeditor.php 

HotDog Professional 7.0. 1 : www.sausage.com/ 

WebFast : www.internetspirit.com/ 

Logiciels gratuits 

1 st Page 2000 : www.evrsoft.com/lstpage2.shtml 

Amaya : www.w3.org/Amaya/ 

Mozilla Composer : www.archilinux.org/mozilla/composer.html 

Telechargement de la suite Mozilla : www.mozilla-europe.org/fr/ 

Netscape Composer : http://wp.netscape.eom/communicator/composer/v4.0/ 
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Nvu : http://frenchmozilla.sourceforge.net/nvu/ Le site principal anglais est 

www.nvu.com Un tutoriel tres complet couvrant 1' installation, la 

configuration et l'utilisation de Nvu (fonde sur la version 0.9) est 

egalement propose sur le site de Framasoft (www.framasoft.net/article2G5G 

.html). 

SoThink HTML Editor (CutePage) : www.SOthink.com/htmleditor/ 



Navigateurs 

Internet Explorer : www.microsoft.com/france/intemet/produits/ie/default.mspx 

Netscape Navigator : www.telechargement.netscape.fr/telechargement 

/netscape7/ 

Mozilla : www.mozilla-europe.org/fr/ 

Firefox : www.mozilla-europe.org/fr/products/Firefox/ 

Un excellent comparatif entre Internet Explorer et Firefox est propose a 

l'adresse http://emmanuel.clement.free.fr/navigateurs/comparatif.htm 

Opera : www.opera.com/ 

Camino : www.mozilla-europe.org/fr/ 

Lynx : un excellent tutoriel en francais peut etre trouve a l'adresse 

http://dominique.guebey.club.fr/tekno/lynx/index.htm La page officielle est http: 

//lynx.browser.org/ 

pwWebSpeak : une version de demonstration de ce navigateur texte- 

parole peut etre trouvee a l'adresse www.prodworks.com 



Images 

Fonds d'ecran : www.atelier-duotang.com/tuiles/modeles/fonds.php?page=l 

Ulead SmartSaver : www.ulead.com/webutilities/frwhere.htm 

Paint Shop Pro (129 $): www.jasc.com/products/paintshoppro/ 

The Gimp : http://gimp-win.sourceforge.net/ 

SRGB : un espace de couleur par defaut standard pour Internet, version 

1.10, M. Stokes, M. Anderson, S. Chandrasekar et R. Motta, 5 novembre 

1996. www.w3.org/Graphics/Color/sRGB 



Sites de gifs animes 

dgif.legif.com/ 
www.yatoula.com/ 
www.icone-gif.com/ 
www.chez.com/gif/ 
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www.01gif.com/ 
gif.webgratuit.com/ 

Editeurs d'images animees 

Microsoft Gif Animator (gratuit) : www.zdnet.fr/telecharger/windows/fiche 

/0,39021313,H010272s,00.htm 

A Smaller GIF (28 $) : www.peda.com/smaller/download.html 

Gif.glf.giF (28 $) : www.peda.com/ggg/download.html 

Ulead GIF Animator 5 (49 $) : www.ulead.com 

Animated Shop/Paint Shop Pro (29/129 $) : www.jasc.com/productS 

/paintshoppro/ 



Feuilles de style 

Specification CSS2 : www.w3.org/TR/REC-CSS2/cover.html#minitoc 

Proprietes des feuilles de style CSS2 : www.w3.org/TR/REC-CSS2/propidx 

.html 

Specifications sur les regies d'heritage CSS2 : www.w3.org/TR/REC-CSS2 

/cascade. html 

Le W3C a cree plusieurs styles basiques a utiliser sur une page Web. 

Visitez www.w3.org/StyleSheets/Core/ 

Vous trouverez l'ensemble des proprietes des feuilles de style auditives a 

1' adressewww.w3.org/TR/REC-CSS2/aural.html 



Scripts 

JavaScript 

Pour commencer, visitez www.hotwired.com/webmonkey/javascript/ 

La JavaScript Source d' Internet World se situe a l'adresse http://javascript 

.internet.com/ 

HotSyte (www.serve.com/hotsyte/) propose des ressources JavaScript, 

offrant de nombreux programmes telechargeables. 

II existe des dizaines de sites consacres a des exemples de code 

JavaScript, parmi lesquels www.toutjavascript.com, javascript.internet.com/, 

javascriptkit.com/, www.javascriptfr.com/ et bien d'autres. 

Le groupe de discussion Usenet comp.lang. javascript est un bon endroit 

ou poser des questions et obtenir les informations les plus fraiches sur 

JavaScript. 
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Une foire aux questions (FAQ) JavaScript peut etre trouvee a l'adresse 

http://idm.internet.com/faq/js-faq.shtml 

Une excellente ressource JavaScript est situee a l'adresse www 

.webreference.com/javascript 

JScript 

La page officielle du createur Microsoft est http://msdn.microsoft.com 

/Nbrary/default.asp?url=/library/en-us/script5G/html 

/js56jslrfjscriptlanguagereference.asp 

Vous trouverez d'autres exemples aux adresses www.asp-fr.net/jscript/ et 

www.pageresource.com/jscript/ (entre autres). 

Vous pouvez trouver des milliers de scripts JavaScript a l'adresse 

www.javascripts.com 

ECMA-Script 

www.ecma-international.org/publications/standards/Ecma-262.htm 

VBScript 

La page officielle du createur Microsoft se trouve a l'adresse http://msdn 

.microsoft.com/library/default.asp?url=/library/en-us/script5G/html/vtorivbscript 

.asp 

Vous trouverez d'autres exemples et tutoriels aux adresses www 

.intranetjournal.com/corner/wrox/progref/vbt/, www.asp-fr.net/vbscript/, www 

.asp-php.net/tutorial/scripting/index.php (entre autres). 

Java 

De nombreuses ressources de script sont disponibles a l'adresse www.irt 
.org/ Ce site propose d'ailleurs des ressources sur pratiquement tous les 
sujets abordes dans ce livre. 

De nombreuses autres ressources Java, parmi lesquelles des applets, 
peuvent etre trouvees a l'adresse www.developer.com/java/ 



Cookies 

La foire aux questions (FAQ) Unofficial Cookie se trouve a l'adresse 
www.cookiecentral.com/unofficial_cookie_faq.htm 
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Modules complementaires 

Shockwave : www.macromedia.com/shockwave/download/download.cgi7Pl 
ProdVersion = ShockwaveFlash 
Adobe Acrobat Reader : www.adobe.fr/products/acrobat/readstep2.html 
RealPlayer : http://france.real.com/player/?&src=ZG.fr.idx,ZG.fr.rp.rp.hd.def 
Ressources MIDI : www.midi.com 
QuickTime : www.apple.com/quicktime/download/win.html 



Logiciels FTP 

CuteFTP : www.cuteftp.com/cuteftp/ 

LeechFTP : http://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html. Ce 

produit, dont il existe une version francaise, va prochainement etre 

remplace par BitBeamer, du meme auteur. 

WS- FTP 95 : nombreux sites, dont www.sharewarejunkies.com/8zwd7 

/ws_ftp_95_le.htm 

FileZilla : nombreux sites, dont le site officiel http://sourceforge.net/project 

/showf iles.php?group_id =21558. 

Vous pourrez telecharger de nombreux autres clients FTP gratuits a 
partir des adresses suivantes : 
www.01net.com/telecharger/windows/lnternet/ftp/ 
www.tutoriels.com/downloads.php7id =57 
www.jetelecharge.com/softs-49-l.php 

http://telecharger.presence-pc.com/categorie.asp7num =43&page=l 
et bien d' autres encore... 
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Accessibility : Procurer un acces universel a un site Web a l'aide de 
n'importe quel dispositif entree-sortie comme : reconnaissance vocale, 
lecteurs d'ecran ou interpreters braille, dispositifs de pointage non 
standard et TTY. 

ActiveX : Technique proprietaire Microsoft permettant au navigateur 
Web d'incorporer et de controler des applications dans une page Web. 

Adresse IP : Numero unique utilise par les ordinateurs afin de 
s' identifier sur Internet. Les utilisateurs se connectant par modem 
telephonique possedent souvent des adresses IP dynamiques, afin de 
minimiser le nombre dTP disponibles. 

Alignement : Positionnement du contenu d'une page par rapport aux 
marges : gauche, droite ou centre. 

Animation : Graphisme a multiples images, un fichier Shockwave ou 
une applet d' animation Java semblant s'animer a l'ecran. 

API (Application Programming Interface) : Dans un serveur Web, un 
environnement de programmation permettant la redaction de 
programmes integres pour des scripts cote serveur ou autres taches du 
serveur. 

Applet : Miniprogramme, generalement ecrit en Java, qui execute une 
application contenue dans une page Web. 

Application : Programme independant qui possede un but particulier. Un 
programme JavaScript, une applet Java ou meme un ensemble de pages 
Web peuvent constituer une application. 

Architecture : Combinaison d'un microprocesseur et du materiel 
identifiant un modele d'ordinateur (x86, SPARC, Macintosh, etc.). 

Archive : Un ou plusieurs fichiers renfermant d' autres fichiers dans un 
but de sauvegarde ou de reference ulterieure. 

ASCII : Donnees en texte pur, ni codees ni compressees. 

Aspect : Combinaison des couleurs de document, des images et des 
outils de navigation conferant a un site une image homogene. 
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Assistant : Petit programme, le plus souvent incorpore a un autre 
programme, automatisant une tache complexe ou guidant a travers les 
etapes successives d'un concept peu familier. 

Attribut : Influe sur un element HTML. Un attribut determine les 
proprietes d'un element. 

Attribut (declaration d') : En XML, une declaration d' attribut definit la 
facon dont les attributs peuvent etre utilises et dans quels elements. 

Auditive (feuille de style) : Feuille de style en cascade (CSS) contenant 
des proprietes specifiques aux navigateurs Web audio. 

Autorisation : Permission de lire, d'ecrire ou d'executer des fichiers 
accordee a des individus, des groupes ou des utilisateurs anonymes. Voir 
aussi droit d'acces. 

Authentification de base : Nom d'utilisateur et/ou mot de passe exiges 
pour pouvoir acceder a un fichier ou a un repertoire, sans que la 
transaction (mot de passe compris) soit forcement cryptee. 

B 

background : Utilise comme attribut pour l'element BODY, il specifie 
1' image d'arriere-plan a utiliser. En tant que propriete de feuille de style, 
il determine la couleur d'arriere-plan de l'element defini. 

Balise : Chaine de caracteres debutant par < et finissant par >, qui ouvre 
ou ferme un element HTML. 

Balise (editeur de type) : Editeur affichant a l'ecran les balises HTML 
alors que vous editez votre page et possedant des raccourcis pour 
faciliter l'insertion des differentes balises. 

Bande passante : Taux maximal de transfer! d'un lien. 

Barre d'outils : Ensemble de boutons et d'icones d'un programme 
donnant acces aux outils et fonctionnalites de celui-ci. 

Base de donnees : Un ou plusieurs fichiers rassemblant des donnees 
individuelles, telles que les noms d'un carnet d'adresses ou les produits 
d'un catalogue. 
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Barre de navigation : Partie d'une page Web donnant acces aux 
differentes pages et/ou actions possibles sur un site Web. 

Bien forme : Terme applique a un document respectant la specification a 
laquelle il fait reference (XML surtout). 

Binaire : Donnees codees ou compressees, telles que des images, des 
archives, des programmes ou tout fichier non ASCII. 

Bloc (element) : Element HTML qui insere un saut de ligne automatique 
avant sa balise d'ouverture et apres sa balise de fermeture. 

BODY : Corps du document : partie qui renferme le contenu visible d'une 
page. 

BoTte de dialogue : Fenetre independante qui apparait pour poser une 
question, ou servir d'alerte ou d'avertissement a l'utilisateur. Une boite 
de dialogue exige en general une reponse avant d'etre fermee. 

Bordure : Ligne ou frontiere autour d'un element tel qu'un tableau ou 
une image. 

Bouton (aspect) : Transformer une image en lui donnant l'apparence 
d'un bouton « cliquable ». 



Cache : Emplacement du disque dur ou le navigateur stocke les fichiers 
temporaires. 

Cadre (frame) : Panneau individuel dans un jeu d'encadrement 
(frameset) permettant de voir une seule page Web a la fois. 

Caracteres (jeu de) : Un jeu de caracteres (charset) est l'ensemble des 
caracteres et symboles utilises dans un document. Par exemple, 
1' alphabet japonais utilise un jeu different de celui de 1' alphabet de 
1' Europe de l'Ouest. 

Casse (sensibilite a la) : Difference entre majuscules et minuscules. 

Cellule : Case individuelle d'un tableau. 



542 LE GUIDE COMPLET 



CGI (Common Gateway Interface) : Interface de programmation qui 
permet a un utilisateur Web anonyme d'executer un programme (tel un 
script Perl) sur le serveur. 

Champ (de formulaire) : Element individuel qui recupere une saisie de 
1' utilisateur. 

Chiffrage : Fait de crypter les donnees afm qu'elles ne puissent etre lues 
sans 1' application d'un algorithme de dechiffrage precis. 

Classe : Selecteur de feuille de style permettant d'appliquer une 
definition de style a n'importe quel element en utilisant l'attribut 
facultatif class. 

Client: Partie utilisateur d'une connexion reseau. L'ordinateur ou le 
programme client ne gere que quelques connexions simultanement, 
toutes les connexions etant initiees par lui-meme. 

Clip art : Image gratuite ou peu couteuse pouvant etre integree a tout 
document. Verifiez toujours les droits d'auteurs et contraintes 
d'utilisation avant d'utiliser un quelconque clip art. 

Code : Instructions sous-jacentes destinees a l'ordinateur. Le code 
source HTML n'est pas compile et peut facilement etre consulte. 

Codec : Code sous-jacent qui permet la lecture d'un fichier d'un format 
precis. Essentiellement employe pour les fichiers son, image et video. La 
majorite des codecs usuels sont integres aux logiciels concernes, mais il 
peut etre a l'occasion necessaire de telecharger un codec 
complementaire. 

Colonne : Affichage vertical de donnees dans un tableau. 

Commentaire : Chaine de caracteres de type texte non affichee par le 
navigateur Web. 

Compatibility inter navigateurs : Rendre un site Web compatible avec la 
plupart, sinon tous les navigateurs Web, en general en n'utilisant que les 
standards Web. 

Compteur : Script ou SSI (Server Side Include) comptant et affichant le 
nombre de touches recues par la page active. 
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Compression : Utilisation d'un algorithme pour reduire la taille d'un 
fichier par elimination des donnees redondantes. Largement employe 
pour les fichiers image. 

Concepteur : Professionnel du Web qui organise, redige ou met en 
ceuvre un site Web. 

Contenu : Texte, images et fichiers multimedias places dans une page 
Web. 

Contenu (notation du) : Pratique consistant a decrire tout contenu 
potentiellement agressif ou derangeant dans un element META ou un 
commentaire arm de procurer un controle parental sur 1' experience Web 
des enfants. 



mtextuel (element) : Element procurant des informations quant a la 
;nification de 1' element marque, et non uniquement sur la facon dont il 

it £trf» affir*h4 



Contextuel 

sig 

doit etre affiche 



Cookie : Petit fichier qui stocke de petits bouts d' informations afin 
d' aider les concepteurs de sites a les rendre plus interactifs ou pour 
permettre une personnalisation du site. 

Couleurs de document : Couleurs du fond, du texte et des liens 
hypertextes utilises dans un document, tels qu'ils sont dermis dans un 
element (souvent BODY) ou dans une feuille de style. 

Courriel : Courrier electronique. Message envoye rapidement et 
simplement sur Internet, a l'aide du protocole SMTP (Standard Mail 
Transfer Protocol), grace a un logiciel de messagerie electronique. 



Defilement : Utilisation des touches de direction du clavier ou des barres 
de defilement pour afficher les informations hors ecran en raison des 
limites imposees par la taille de l'ecran, mais appartenant au document 
courant. 

Definition (liste de) : Liste HTML possedant deux types de membres : le 
terme et sa definition. 

Descripteur de media : Dans une feuille de style, le type de 1' agent 
utilisateur qui va afficher la page Web. 
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Document Type Declaration (DOCTYPE) : Le DTD est un document 
defmissant la facon dont les elements HTML doivent etre affiches, ainsi 
que les attributs correspondant a ces elements. 

DOM (Document Object Model) : Le Modele Objet de Document est un 
moyen de nommer les objets d'un document afin de pouvoir les utiliser 
dans un script. 

Donnee : Information, generalement transmise ou stockee dans un 
ordinateur. 

Droit d'acces : Permission de lire, d'ecrire ou d'executer des fichiers, 
accordee a des individus, des groupes ou des utilisateurs anonymes. 

Dynamique (HTML) ou DHTML : Rend HTML dynamique et modifiable 
a l'aide de langages de script et du DOM. Desormais deconseille. 



ECMAScript : Tentative de normalisation du langage de script employe 
avec HTML. Correspond a un « tronc commun » entre JavaScript et 
JScript. 

Element : Conteneur HTML qui possede une signification particuliere 
pour un document. 

Element (declaration) : En XML, declarer un element et son utilisation 
dans le DTD. 

Email : Voir courriel. 

En ligne : Fait d'etre connecte a Internet. En HTML, caracterise 
egalement un element qui s'insere a la suite du precedent et avant le 
suivant sans insertion de saut de ligne. 

En-tete HTTP : Information envoyee automatiquement avec un 
document Web lors du transfert HTTP. II peut contenir le nom du fichier, 
sa date, sa taille, ainsi que toute information mentionnee dans des 
elements META. 

Enfant (element) : Tout element inclus dans un autre element HTML. 
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Entite (declaration) : En XML, declarer un objet comme devant etre 
remplace par un fichier externe ou par une donnee frequemment utilisee, 
comme une adresse electronique ou des informations de droits d'auteur. 

Espace vierge : Espace inutilise autour du texte ou d'une image dans un 
programme de PAO ou la publication Internet. En HTML, certains 
caracteres sont interpretes, comme les retour-chariot, les tabulations et 
les espaces excedentaires. 

Exposant : Texte « flottant » au-dessus de la ligne normale de texte. 



FAI : Fournisseur d'acces a Internet. Correspond a l'anglo-saxon ISP 
(Internet Service Provider). 

FAQ (Foire aux questions ou Frequently Asked Questions) : Un fichier 
d'aide se presentant sous la forme d'une suite de questions/reponses. 

Favoris : Ensemble de fichiers utilises par Internet Explorer pour 
enregistrer les adresses des sites frequemment visites. Correspond aux 
signets Netscape/Firefox. 

Feuille de style : Fichier ou partie de document Web decrivant la facon 
d'afficher des elements HTML individuels dans un navigateur Web. 

Firefox : La nouvelle generation du navigateur Web Mozilla. 

Formulaire : En HTML, un element permettant aux utilisateurs de saisir 
des donnees traitees par la suite via un script cote client ou un 
programme CGI. 

Frequentation : Le nombre et le type des visites sur un site. 

Frameset : Jeu d'encadrement qui apparait dans un navigateur et permet 
de visualiser simultanement plusieurs pages Web. 

FTP (File Transfer Protocol) : Protocole standard pour le transfert de 
fichiers en tous sens sur un reseau. 

Fonction : En programmation, un fragment de programme renfermant 
une serie d' instructions, pouvant ensuite etre appele ou utilise a 
plusieurs reprises dans le programme. 
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Gadget : Objet miniature offrant diverses fonctionnalites. C'est le nom 
donne par Google a ses widgets. 

GIF : Format de fichier graphique bien adapte aux images simples. 

Glisser-deposer : Fait de cliquer sur un objet avec le bouton gauche, 
puis de deplacer la souris en laissant le bouton enfonce et de deposer 
ensuite 1' objet (en relachant le bouton) a un autre emplacement de 
l'ecran. 

Google : A l'origine un simple mais tres performant moteur de 
recherche, aujourd'hui un groupe qui propose de nombreux produits et 
solutions aux internautes (Google Maps, Google Search, Google Earth, 
Google Gadgets, etc..) 

Google Analytics : Systeme de suivi de la frequentation d'un site, 
propose par Google. 

GUI (Graphical User Interface) : L' interface graphique utilisateur est la 
partie graphique d'un programme qui, le plus souvent a l'aide de 
fenetres et de boites de dialogue, permet de controler ce programme. Par 
opposition aux programmes de type texte, a interface ligne de 
commande, souvent plus difficile a apprendre et a utiliser. 

H 

Headings : En HTML, les headings (en-tetes) constituent un moyen tant 
visuel que structurel d'organiser et de presenter un document. 

HEAD : Element d'un document qui renferme des informations sur la 
page, mais pas de contenu visible. 

Hit : Terme anglophone qui correspond a une visite sur un site. 

Hebergement Web : Fait d' avoir recours a un serveur Web qui 
appartient a une tierce personne pour rendre un site Web disponible sur 
Internet. Votre hebergeur est generalement votre FAI. 

Hote : Nom d'un ordinateur ou d'un programme sur un domaine, 
comme le www de www.domain.com ou iocai2 dans local2.domain.com 
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HTML (Hypertext Markup Language) : Ensemble des elements identifies 
qui indique a 1' agent utilisateur comment afficher ces elements et les 
informations d'une page Web. 

HTTP (Hypertext Transfer Protocol) : Protocole employe par les 
ordinateurs lors du transfert de documents Web (http: //). 



I 

Icone : Petite image aidant a la navigation ou apportant une signification 
accrue au texte. 

ID : Selecteur de feuilles de style devant etre unique a l'interieur d'une 
page Web, et pouvant utiliser n'importe quel style. 

Image cliquable : Une meme image comportant plusieurs liens 
hypertextes. 

Imbriquer : Placer un element HTML a l'interieur d'un autre element. 
Frequemment utilise pour des elements identiques, tels que listes et 
tableaux. Certains elements ne peuvent etre imbriques. 

Indice : Texte place en dessous de la ligne normale de texte. 

Input : Accepter des donnees a partir d'un site Web, en general via un 
champ de formulaire. 

Interactivity : Accepter des saisies utilisateur et y repondre de facon 
dynamique. 

Internationalisation : Rendre un site accessible a d'autres langues et 
cultures. Egalement nomme localisation. 

Internet : Reseau international et publiquement disponible d'ordinateurs 
utilisant des protocoles standard reseau pour communiquer et transferer 
des informations. 

Internet Explorer : Le navigateur Web Microsoft integre aux systemes 
d' exploitation Windows. 

Intranet : Reseau prive interne, souvent place a l'abri d'un pare-feu. 
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ISP (Internet Service Provider) : Fournisseur d'acces Internet (FAI) : la 
societe ou l'organisation qui procure Faeces Internet a un individu ou a 
une societe. 



Java : Langage de programmation complet et compatible entre plates- 
formes developpe par Sun Microsystems. 

JavaScript : Langage de scripts cote client developpe par Netscape. 

Journal : Fichier d'enregistrement d'evenements precis. Par exemple, 
chaque acces a un site Web : les fichiers concernes et d'autres 
informations telles que l'heure, la date et l'adresse IP de chaque client. 

JPEG : Format de fichier graphique particulierement adapte aux images 
complexes (photographies). 

JScript : Implementation Microsoft de JavaScript : JScript et JavaScript 
ne sont pas 100 % compatible entre eux. 



Libre (source) : Tout programme technique ou bibliotheque dont le code 
source est librement disponible sous forme non compilee, generalement 
arm de permettre le developpement par des programmeurs individuels. 

Lien hypertexte : Mot, expression ou image utilisant une marque HTML 
qui en fait un lien « cliquable ». En cliquant sur un lien hypertexte, 
l'utilisateur voit son navigateur Web ouvrir la ressource correspondant 
au lien. 

Lien (verification de) : Utilisation d'un outil Web pour verifier tous les 
liens d'une page Web et s'assurer qu'ils sont valides. 

Ligne : Donnees affichees horizontalement dans un tableau. 

Ligne (element) : Element n'entrainant pas de saut de ligne ni de rupture 
de paragraphe lors de sa fermeture. 

Localisation : Rendre le site accessible a une langue ou une culture 
particuliere. 
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M 

Masque (champ) : Champ de formulaire non visible par l'utilisateur, 
mais neanmoins transmis avec les autres champs de donnees. 

mailto: : Protocole a utiliser a la place de http : / / pour creer un lien de 
messagerie. 

Marge Espace autour de l'exterieur d'un element. 

META : Element HTML procurant des informations complementaires 
telles qu'en-tetes HTTP, date de rafraichissement ou d'expiration de 
fichiers, noms des auteurs, mots-cles et tout autre contenu possible. 

Methode (de formulaire) : Facon dont les donnees du formulaire sont 
transmises au serveur : GET ou PUT. 

Modele : Document preconcu dans lequel il suffit de « remplir les 
blancs » pour obtenir un document utile et agreable. 

Module complementaire : Application tierce installee dans une autre 
application comme programme integre, tels Shockwave ou Acrobat 
Reader. Egalement nomme plug-in. 

Mot de passe : Mot, expression ou chaine de caracteres secrets 
permettant de verifier que vous etes celui que vous declarez etre. 

Moteur de recherche : Site Web ou programme dressant le catalogue et 
indexant les sites Web, puis autorisant les utilisateurs a rechercher un 
site particulier a l'aide d'un mot-cle, d'une description ou d'autres 
cri teres. 

Mozilla : Precurseur de Netscape Navigator, et maintenant un 
mouvement pour les navigateurs a source libre, qui a notamment cree 
Firefox et Thunderbird. 

Multimedia : Combinaison quelconque de textes, graphismes, fichiers 
audio ou video et pages de realite virtuelle. 

I\l 

Navigateur Web : Programme informatique utilise par un internaute pour 
visualiser une page Web. 
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Navigation : Outils, visuels ou autre, que procure un site Web pour que 
les utilisateurs puissent se deplacer sur le site. 

Netscape Communicator : Ensemble de navigation Web developpe et 
distribue par Netscape Corporation. 

name : En HTML, attribut optionnel qui permet normalement a 
n'importe quel element de figurer dans un script. 

Nom d'utilisateur : Nom qui permet d' identifier un compte utilisateur en 
ligne. Une adresse electronique revet souvent la forme 

nomutilisateur@nomhote . domaine . com. 

Nom de domaine : Identifiant unique sur Internet permettant la 
connexion a un ordinateur individuel. 

Nom reserve : En programmation, un mot qui ne peut etre employe 
comme variable ou nom de fonction parce qu'il possede deja une 
signification particuliere dans le langage de programmation. 

Non ordonnee (liste) : Liste a puces. 

Non proportionnelle (police) : Police de caracteres conservant un 
espacement constant quelle que soit la largeur reelle de la lettre : ceci 
est une police non proportionnelle. 

Non standard (navigateur Web) : Navigateur Web ne respectant pas 
HTML 4, ou par extension affichant une page Web d'une facon 
sensiblement differente des navigateurs les plus courants, Firefox et 
Microsoft Internet Explorer. 

Note de fin : Note ou commentaire place a la fin d'un document. 

Note de pied de page : Note ou commentaire place a la fin d'une page 
Web. 



Objet : Element enumere dans le Modele Objet de Document (DOM), 
utilise ou manipule par un script cote client. 

Objet incorpore : Tout fichier (le plus souvent multimedia) utilisant 
l'element OBJECT pour etre place dans un document Web. 
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Open source : Voir source libre. 
Ordonnee (liste) : Liste numerotee. 

P 

Page Web : Page individuelle redigee en HTML. 

Palette : Ensemble des couleurs disponibles dans tout programme 
d' edition graphique. 

Pare-feu : Combinaison de materiel et de logiciels placee entre deux 
reseaux (par exemple, un reseau interne et Internet) afin de limiter les 
transactions a ce qui est autorise. 

Parent (element) : Element renfermant ou controlant (dans un script) un 
autre element. 

Passage a la ligne : Ce qui se passe lorsque l'extremite d'un texte atteint 
la limite droite de l'espace de visualisation, dans une fenetre ou une 
zone de saisie. 

Perl : Langage de programmation non compile aussi simple que 
repandu, utilise pour les scripts CGI. 

Pixel : Plus petit element adressable d'un ecran. 

Plate-forme : Combinaison de 1' architecture (materiel) et du systeme 
d' exploitation (logiciel) rendant un environnement informatique unique 
(Windows NT sur Intel et Windows NT sur DECAlpha, par exemple). 

Plug-in : Voir complement. 

Police : Aspect visuel des caracteres d'un texte. 

Positionnement : La facon de placer a l'ecran des objets par rapport au 
coin superieur gauche de l'ecran (positionnement absolu) ou par rapport 
a d'autres objets (positionnement relatif). 

Preferences : Dans un navigateur Web, le menu utilise pour definir les 
couleurs de police, la page de demarrage, les identites de messagerie et 
de groupes de discussion, les dispositifs de securite et autres options. 
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Presentation : Positionnement visuel des paragraphes de texte, d'images 
et d'autres elements d'un document. 

Proprietaire : Technique ou programme au developpement tres ferme. 
Une licence doit etre acquise par tout utilisateur potentiel d'une telle 
technique proprietaire. Ces techniques ne sont validees par aucun comite 
de standardisation. 

Proxy (serveur) : Serveur effectuant la connexion a votre place, puis 
renvoyant le resultat. Souvent utilise dans des coupe-feu et pour 
procurer des services de cache a de grands reseaux. 



Remplissage : Espace entre la bordure d'un element (s'il en possede 
une) et le contenu de l'element (texte, image ou fichier incorpore). 

Reseau : Ensemble d'ordinateurs relies a l'aide de protocoles reseau 
identiques, tels que TCP/IP (pour Internet). 

Resolution : Nombre de pixels, exprime en largeur x hauteur, pouvant 
etre affiches par un ecran. 

RGB (valeurs) : Valeurs respectives de rouge, vert et bleu defmissant une 
couleur en HTML. 



Sans serif (police) : Polices comme Arial et Helvetica, depourvues 
de serifs, les petites lignes en bas des bras et des jambes des lettres (le 
pied d'un « 1 », par exemple). 

Script : Petit programme pouvant effectuer un nombre illimite 
d' instructions. 

Scripting : Application d'un script a un element HTML dans un script 
cote client tel que JavaScript. 

Securise (serveur) : Serveur Web utilisant SSL (Secure Socket Layer) ou 
une autre methode de codage pour proteger tous les echanges de 
donnees entre lui et ses clients. 
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Securite (zones de) : Dans Microsoft Internet Explorer, une zone de 
securite est une region, comme un reseau local, un intranet ou Internet, 
a laquelle vous appliquez des consignes de securite particulieres. 

Serif (police) : Polices comme Times New Roman et Times, dotees de 
petites lignes au bout des jambages des lettres (comme le pied d'un 
« 1 », par exemple). 

Site Web : Ensemble de pages Web reliees par des liens hypertextes et 
generalement maintenu par un individu ou un groupe. 

Surveiller : Conserver une veille constante sur la disponibilite, le temps 
de reponse et le trafic d'un site Web. 

Serveur : Dans une transaction reseau, le serveur gere de nombreuses 
connexions emanant de nombreux ordinateurs differents, pour transferer 
les informations d'un endroit a un autre. 

SGML (Standard Generalized Markup Language) : Methode de description 
de langages a balises devant procurer une information visuelle, 
structurale et syntaxique du contenu d'un document. Ne s'applique pas 
forcement au Web, ni meme a un document electronique. 

Signet : Avec Netscape et Firefox, un site frequemment visite dont vous 
enregistrez l'URL dans un nchier sur votre disque. L'equivalent d'un 
Favori Internet Explorer. 

Signet interne : En HTML, un lien hypertexte menant vers une 
destination interne a la page. 

Sortie (output) : Donnees ou resultat renvoye apres qu'un utilisateur a 
demande une information a un serveur Web. Se refere generalement a 
une requete. 

Source : Voir code. 

Specifique navigateur : Element et/ou fonctionnalite ne fonctionnant 
que sur une famille de navigateurs et n'appartenant pas aux standards 
Internet. 

Spam : Pourriel. Message electronique non sollicite, en general de 
nature commerciale, envoye a des gens n'ayant rien demande et ne 
souhaitant pas les recevoir. 
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Specification : Description de la mise en oeuvre d'une technique. La 
specification HTML decrit la mise en oeuvre preconisee de HTML dans 
un navigateur Web afin que les auteurs Web puissent s'en servir 
efficacement. 

SSI (Server-Side Includes) : Methode cote serveur qui permet 1' inclusion 
de donnees, fichiers et informations dans une page Web avant leur 
affichage dans le navigateur Web. 

SSL (Secure Sockets Layer) : Standard de securite pour les 
communications TCP/IP, le plus souvent employe avec HTTP. 

Systeme d'exploitation : Logiciel fournissant tous les services de base, 
tel l'acces aux ressources materielles, a la memoire, au processeur et aux 
autres programmes. 

Style (propriete) : Caracteristique individuelle d'un element HTML 
modifie ou defini a l'aide d'une feuille de style externe ou interne, ou de 
l'attribut style. 

Style (selecteur) : Attribut HTML (ID ou class) appliquant des 
proprietes de style a l'element contenant l'attribut sans changer 
1' element. 

Submit (bouton) : Champ de formulaire envoyant les donnees du 
formulaire vers un script. 

Syntaxe : Facon particuliere de rediger le code source afin qu'il soit 
comprehensible par un ordinateur. 



Tableau : Quadrillage permettant d'afficher des donnees plus 
efficacement en lignes et en colonnes. Egalement utilise dans un simple 
but de presentation. 

TCP/IP (Transmission Control Protocol/Internet Protocol) : Utilises 
conjointement, ils constituent la forme primaire de transmission de 
donnees sur Internet. IP definit le format des paquets de donnees 
envoyes tandis que TCP gere le rassemblement des paquets a l'arrivee et 
la recuperation des donnees perdues. 
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Telechargement (download) : Transfer! des donnees depuis un 
ordinateur distant sur votre propre ordinateur. 

Telechargement (upload) : Transfert de donnees ou de flchiers de votre 
ordinateur local vers un ordinateur distant. 

Texte (editeur de type) : Editeur demandant la saisie manuelle de tous 
les codes HTML. 

Texte seul (navigateur) : Navigateur Web qui n'affiche que du texte : pas 
d'image, de contenu multimedia ni meme souvent de tableaux. 

Thunderbird : Le nouveau logiciel de messagerie open source de 
Mozilla. 

Touche (hit) : Acces vers une page Web. Correspond en general a un 
acces vers la page elle-meme, pas vers les images qu'elle contient. 

Trafic : Portion de bande passante utilisee par le reseau a un moment 
precis. Un trafic important sur votre serveur signifie de nombreuses 
touches, mais egalement des connexions ralenties. 

TWAIN (compatible) : Scanner, camera, appareil photo ou tout autre 
dispositif d'entree compatible avec le standard TWAIN. 

u 

Unicode : Le systeme de codification de caracteres permettant l'emploi 
electronique de toutes les langues mondiales. 

URI (Uniform Resource Identifier) : Connu auparavant sous le nom 
d'URL, c'est l'emplacement d'un document ou d'un fichier sur Internet. 

URL (Uniform Resource Locator) : Adresse d'identification d'une 
ressource Internet (le plus souvent une page Web). 

Url (codification) : Methode de codification de caracteres speciaux telles 
les barres obliques (slashes) dans une adresse URL afm qu'un serveur, 
ou un autre programme, puisse les comprendre. 

Utilisateur : Individu accedant a un site Web ou utilisant un programme. 
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Uuencode : Connu initialement sous le nom de UNIX-to-UNIX Copy, 
c'est une facon de transformer un fichier binaire en texte dans le but de 
le transferer a l'aide d'un programme texte seul, tel un client de 
messagerie electronique. 

V 

Valeur : Dans un element HTML, les attributs possedent le plus souvent 
une valeur qui modifie le comportement de l'element. 

Validation : Executer un programme pour s'assurer que le code HTML 
utilise dans une page Web correspond bien au standard HTML 4 du 
W3C. 

Valide : Terme applique a un document qui respecte scrupuleusement la 
DTD a laquelle il fait reference (XML principalement). 

Variable : Dans un programme ou un script, un emplacement nomme ou 
des donnees peuvent etre stockees et recuperees selon les besoins des 
programmes. 

VBScript : Un langage de script concu par Microsoft similaire par sa 
syntaxe a Visual Basic. 

Vignette : Image reduite en taille, qui accelere le telechargement. Utilise 
pour les catalogues d' images et les apercus. Egalement nommee 
« miniature ». 



w 

W3C (World Wide Web Consortium) : le groupe de travail sur les 
standards a l'origine des recommandations Web tels HTML, CSS et 
XML. 

WebTV : Technique en developpement permettant aux utilisateurs de 
surfer sur Internet a l'aide d'une television plutot que d'un ordinateur. 

Widget : Contraction de windows gadget correspondant a un dispositif 
graphique affiche a l'ecran. Ce terme est desormais reserve a un objet 
miniature, generalement programme en JavaScript, qui accomplit des 
fonctions particulieres. 
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World Wide Web ou WWW : Ensemble des ressources Web presentes sur 
Internet. 

WYSIWYG (What You See Is What You Get) : Tel ecran, tel ecrit : editeur 
dans lequel vous editez un document tout en pouvant 1' examiner sous 
1' aspect exact qu'il aurait sous un navigateur. 



XML (extensible Markup Language) : Sur-ensemble de HTML autorisant 
1' application de differentes definitions de types de document (DTD) a 
une page Web. 



XSL : Feuilles de style en XML. 
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Adobe Acrobat Reader 455 
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Animated Shop 3 208 
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noresize 258 

readonly 369 

rel 304 

rows 247 

scope 441 

scrolling 258 

shape 214 

size 165 

span 124 

src 257 

style 148, 281 

summary 93, 128, 439 

tabindex 363 

target 261 

text 177 



LE GUIDE C0MPLET 561 



HiMlFlEl lndex 



title 196, 304 

type 74, 76, 226, 287, 305, 343, 386 

usemap 23 1 

width 104, 124, 194 

Axis, attribut 452 



B, element 164, 493 

Background, attribut 187 

Balise 22 

BASE, element 264, 493 
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BIG, element 164, 493 

Bloc-notes 34 

BLOCKQUOTE, element 143, 493 

BODY, element 53, 493 
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BR, element 65, 493 
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c 



Calculatrice 182 

CAPTION, element 93, 494 

Caractere 

encodage de 157 

langues et jeux de 465 

non affichable 163 

speciaux 154, 159 

Casse, sensibilite a la 24 

Cellpadding, attribut 99 

Cellspacing, attribut 99 

CENTER 494 

CGI (Common Gateway Interface) 415 
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Citation 

creer 143 

imbriquer 145 

Cite, attribut 143 
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Code source 
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CODE, element 152, 494 
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Cookie 416 
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ajouter a une page Web 177 
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commentaire HTML 137 
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image 190 

image cliquable 214 

image d'arriere-plan 187 

jeu d'encadrement 245 
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tableau 89 
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titre 54 
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proprietes de texte et de police 310 

selecteur 282 

CutePage (voir SoThink) 36 



D 



Data, attribut 226 

DD, element 76, 495 

DEL 495 

DFN, element 155, 495 

DHTML (Dynamic HyperText Markup Language) 19 

DIR 495 

Dir, attribut 461, 464 

Disabled, attribut 368 

DIV, element 140, 288, 495 

DL, element 76, 495 

DOCTYPE, element 245 

DOM (Document Object Model) 395 

DOM2 (Document Object Model level 2) 20 

Donnee (partager entre des cadres) 269 

Dpi (dots per inch) 234 

Dreamweaver 29 

DT, element 76, 495 

DTD (Document Type Definition) 16 



E 



ECMAScript 19, 412 

Editeur 28 

1 st Page 31 

Adobe Golive 29 

Amaya 32 

Composer Mozilla 33 

Dreamweaver MX 2004 29 
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FrontPage Express 33 

FrontPage) 29 

HotDog 30 

Namo WebEditor 30 

NotePad 34 

Nvu 35 

SoThink 36 

Web Fast 31 

WebExpert 30 

Word 31 

WYSIWYG (What You See Is What You Get) 28 

Element 22 

A 59 

ABBR 151 

ACRONYM 151 

ADDRESS 147 

APPLET 155, 426 

AREA 210 

B 164 

BASE 264 

BASEFONT 165 

BDO 463 

BIG 164 

BLOCKQUOTE 143 

BODY 53 

BR 65 

BUTTON 350 

CITE 143, 155 

CODE 152 

de type bloc 23 

de type ligne 23 

DFN 155 

DIV 140, 288 

DL 76 

DOCTYPE 47, 245 

EM 149 

EMBED 430 

FIELDSET et LEGEND 360 

FONT 165, 183 

FORM 339 

FRAME 248 

FRAMESET 245 

HEAD 49 

Hn 54 

HR 136 

HTML 48 
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I 164 

IFRAME 271 

IMG 155, 191 

INPUT 343 

ISINDEX 350 

KBD 152 

LABEL 357 

LINK 303 

MAP 210 

META 50, 157, 280, 305, 386 

NOFRAMES 246, 270, 453 

NOSCRIPT 388 

OBJECT 155, 224, 269, 426, 455 

OL 73 

P 57 

PARAM 429 

parent 23 

PRE 141 

Q 143 

S 164 

SCRIPT 383 

SELECT 352 

SMALL 164 

SMP 152 

SPAN 140, 288 

STRIKE 164 

STRONG 149 

structure 24 

STYLE 282 

SUB 167 

SUP 167 

TABLE 90 

TD 90 

TEXTAREA 356 

TITLE 49 

TR 90 

TT 164 

U 164 

UL 75 

VAR 155 

EM, element 149, 495 

EMBED, element 430 

Encodage de caracteres 157 

Enctype, attribut 340, 374 

Entites de caracteres 160 

Evenements 390 
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F 



Face, attribut 166 

Feuille de styles 

alternative 304 

auditive 328 

en cascade 323 

externe, creer 294 

heritage 323 

interne, creer 282 

principales proprietes CSS 309 

proprietes de boites 311 

FIELDSET, element 360, 495 

Filezilla 475 

Firefox 39 

FONT, element 165, 183, 495 

For, attribut 358 

FORM, element 339, 495 

Format HTML 49 

Formulaire 

ajout d'une structure 360 

bouton d'action 348 

bouton d'option 346 

bouton de soumission graphique 347 

bouton de soumission ou de reinitialisation 346 

boutons 350 

case a cocher 345 

commande cachee 348 

commandes en lecture seule 369 

commandes inactives 368 

et focus 362 

menu 352 

saisie de mot de passe 344 

saisie de texte 343 

soumettre 370 

touches d'acces rapide 366 

traitement des donnees 373 

traiter a l'aide d'un script 415 

zone de texte de saisie multilignes 356 

Frame (voir Jeu d'encadrement) 244 

Frame, attribut 95 

FRAME, element 248, 496 

Frameborder, attribut 258 

Frameset (voir Jeu d'encadrement) 244 

FRAMESET, element 245, 496 

Frequentation, suivre la 478 
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FrontPage 29 

FrontPage Express 33 

FTP (File Transfer Protocole) 474 



G 



Get, methodeHTTP 371 

Gif glfgiF 208 

Google Analytics 478 

compte 478 



H 



HEAD, element 49, 496 

Headers, attribut 441 

Height, attribut 194 

Heritage 

des attributs 130 

feuille de styles 323 

Hn, element 54, 496 

HotDog 30 

HR, element 136, 496 

Href, attribut 213, 305 

HTML 496 

commentaire 137 

definition 12 

editeur 28 

element 48 

elements structuraux de texte 155 

evenements intrinseques 39 1 

format 49 

HTTP (Hypertext Transfer Communication Protocol) 60 

HTTP-EQUIV, attribut 419 



I 



I, element 164, 496 

Id, attribut 62, 140, 269, 287 

IETF (Internet Engineering Task Force) 12 

IFRAME, element 271, 497 

Image 

animee 198 

d'arriere-plan, inclure 187 

568 LE GUIDE C0MPLET 



Index 



Chapitre 1 



inserer 190 

reduire la taille des fichiers 237 

reduire la taille physique 234 

IMG, element 155, 191,497 

Index.html 247 

INPUT, element 343, 497 

INS 498 

Instruction 

IDOCTYPE 47 

document. write 384 

Internationalisation 456 

Internet Explorer 39 

ISINDEX, element 350, 498 

Ismap, attribut 222 



J 



Java (differences avec Java script) 425 

JavaScript 397 

compatibility avec les navigateurs 407 

differences avec Java 425 

proprietes de document 406 

Jeu d'encadrement 244 

accessibilite 453 

cadre cible 261 

cible par defaut des liens 264 

conflits de noms 263 

contenu de remplacement 270 

imbriquer 265 

noms reserves 262 

partage de donnees 269 

JVM (Java Virtual Machine) 455 



K 



KBD, element 152, 498 



L 



LABEL, element 357, 498 

Lang, attribut 140, 145, 457 

valeurs 459 

LEGEND, element 360,498 

Legende de tableau 93 
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LI, element 73, 498 

Lien hypertexte, creer 59 

Link, attribut 177 

LINK, element 303, 498 

Liste 

a puce, creer 75 

de definitions, creer 76 

imbriquee, creer 79 

ordonnee, creer 73 

Listing 

accueil.html v. 2.7. 1 252 

audit.css 333 

barrenav.html 2.7.1 251 

citations imbriquees 146 

date2 .js 402 

element CODE 151, 153 

element MAP restitue 230 

elements ABBR et ACRONYM 151 

elements OBJECT et EMBED 430 

exemple MathML 172 

extrait de la section HEAD de la page d'accueil de MicroApplication 53 

extrait du code du fichier listesimbriquees2.html 87 

famille.html (version 1.4.1) 92 

fonction Get_Cookie 420 

index.html v.2.7. 1 250 

index.html v.2.7. 2 256 

listes imbriquees 80 

notations scientifiques en texte 169 

pageacc l_0.html 57 

pageacc l_3_2.html 64 

pageacc l_3_3.html 68 

Pageacc_vl_3_3.html 46 

position.html 318 

position0.html 316 

region.html version 1 .4.2 110 

region.html version 3.8.1 298 

region_erreurs.html 120 

romeo.html 329 

styleaudit.css 329 

styleaudit2.css 332 

STYLEDIVSPAN.html 289 

tailles de police 1 66 

visuel.css 333 

Localisation 456 

Longdesc, attribut 259 

Lynx 41 
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MAP, element 210, 499 

Marginheight, attribut 258 

Marginwidth, attribut 258 

Masquer (les donnees de script aux agents utilisateurs) 389 

Mathematiques, afficher en HTML 1 69 

MathML 171 

Media, attribut 291, 305 

©media, regie 305, 332 

MENU 499 

META, element 50, 157, 280, 305, 386, 499 

Method, attribut 340 

Microsoft Gif Animator 204 

Modele MVC (Model- View-Controller) 279 

Modifier 

apparence du texte 164 

couleur d'une cellule de tableau 1 84 

couleur du texte dans un element 183 

couleurs d'un tableau 184 

marges d'un paragraphe 148 

police 165 

schema de couleurs de la page 178 

site pour 1' adapter a plusieurs langues 456 

styles affiches par le navigateur 325 

Module complementaire 227, 454 

Mosaic 12 

Mozilla 39 

Multiple, attribut 353 

MVC (Model-View-Controller), modele 279 



N 



Name, attribut 50, 62, 257, 340 

Namo WebEditor 30 

Navigateur 39 

activer ou desactiver les scripts 384 

afficher le code source 52 

compatibilite JavaScript 407 

Internet Explorer 39 

Lynx 41 

modifier les styles affiches 325 

Mosaic 12 

Mozilla/Firefox 39 

Opera 39 
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Safari 39 

Navigator, objet 410 

NOFRAMES, element 246, 270, 453, 499 

Nohref, attribut 220 

Noresize, attribut 258 

NOSCRIPT, element 388, 499 

NotePad (voir Bloc-notes) 34 

Numero de version 63 

Nvu 35 



O 



OBJECT, element 155, 224, 269, 426, 455, 499 

Objet navigator 410 

OL, element 73, 499 

Opera 39 

OPTGROUP, element 354, 500 

OPTION, element 353, 500 



P 



P element 57, 500 

Page d'accueil 47 

Paint 180 

Paint Shop Pro 180, 239 

Paragraphe 

aligner 67 

creer 57 

modifier les marges 148 

PARAM, element 429, 500 

PhotoShop 180 

Plug-ins (voir Module complementaire) 156 

Popup (voir Fenetre surgissante) 404 

Post, methode HTTP 371 

PRE, element 141, 500 

Precaution avec les couleurs 184 

Proprietes CSS 310 

PwWebSpeack 467 

PwWebspeak 453 



Q, element 143, 500 
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Readonly, attribut 369 

Reference de caractere 1 54 

entite 160 

numerique 159 

Regie ©media 305, 332 

Rel, attribut 304 

Resolution 236 

Rows, attribut 247 

Rowspan, attribut 107 

Rules, attribut 95 



s 



S, element 164, 500 

Safari 39 

SAMP 500 

Saut de ligne, creer 65 

Scope, attribut 441 

SCRIPT 500 

a action unique 381 

activer ou desactiver dans le navigateur 384 

CGI (Common Gateway Interface) 415 

cookie 416 

cote client 380 

cote serveur 380 

ECMAScript 412 

evenements intrinseques HTML 390 

JavaScript 397 

masquer les donnees aux agents utilisateurs 389 

repetitif 382 

traitement de formulaire 415 

VBScript 413 

SCRIPT, element 383, 500 

Scrolling, attribut 258 

SELECT, element 352, 500 

Selecteur CSS 282 

Sensibilite a la casse 

HTML 24 

XHTML 24 

SGML (Standard Generalized Markup Language) 12 

Shape, attribut 214 

Shockwave 455 
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Site Web 

hebergement 473 

publier sur le Web 472 

suivre la frequentation 478 

test 466 

Size, attribut 165 

SMALL, element 164, 501 

SmartSaver 3.0 239 

SMP, element 152 

SoThink HTML Editor 36 

Span, attribut 124 

SPAN, element 140, 288, 501 

Src, attribut 191, 257 

Start, attribut 74 

STRIKE, element 164, 501 

STRONG, element 149, 501 

Style, attribut 148, 281 

STYLE, element 282, 501 

masquer le contenu 292 

SUB, element 167, 501 

Summary, attribut 93, 128, 439 

SUP, element 167, 501 



T 



Tabindex, attribut 363 

TABLE, element 90, 501 

Tableau 

accessibilite 441 

aligner 94 

aligner une cellule 102 

attributs de bordure et de regies de l'element TABLE 96 

bordures et regies, attributs border, frame et rules 95 

calcul du nombre de colonnes 129 

cellules manquantes et cellules se recoupant 117 

colonne, element TD 90 

creer 89 

en-tete de colonne 93 

fixer la largeur des colonnes 104 

fusionner des cellules 107 

heritage des attributs 130 

imbriquer 127 

legende de tableau, element CAPTION 93 

ligne, element TR 90 

mise en forme, attributs char et charoff 132 
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modifier la couleur d'une cellule 184 

modifier le schema de couleurs 184 

regrouper des colonnes 122 

regrouper des lignes 121 

taille et structure des cellules 98 

Tabulation (ordre de) 363 

Target, attribut 261 

TBODY, element 121, 501 

TD, element 90, 502 

Test du site Web 466 

Text, attribut 177 

TEXTAREA, element 356, 502 

Texte 

elements structuraux 155 

modifier l'apparence 164 

modifier la couleur du texte dans un element 183 

structurer 149 

TFOOT, element 121, 502 

TH, element 93, 503 

The Gimp 180, 216 

THEAD, element 121, 503 

Tim Berners-Lee 12 

Title, attribut 196, 304 

TITLE, element 49, 503 

Titre, creer 54 

TR, element 90, 503 

TT, element 164, 503 

Type, attribut 74, 76, 226, 287, 305, 343, 386 



U 



U, element 164, 503 

UL 504 

Ulead Gif Animator 204 

UNICODE 461 

Urchin.js, bibliotheque JavaScript 479 

UrchinTracker(), fonction JavaScript 479 

URI (Universal Resource Identifier) 59 

URL (Universal Resource Locator) 59 

Usemap, attribut 23 1 
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V 



Valign, attribut 102 

Value, attribut 74 

VAR, element 155, 504 

VBScript 413 

Version, numero de 63 

Vlink, attribut 177 



W 



W3C (World Wide Web Consortium) 12 

Web Fast 31 

WebExpert 30 

WebFTP 474 

Width, attribut 104, 124, 194 

Word 31 

WS FTP95 LE 476 



XHTML (extensible Hypertext Markup Language) 16,21 

XML (extensible Markup Language) 17 
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